jQuery ajax upload file in asp net mvc

Question

I have a file in my view   lt form id  upload  enctype  multipart form-data  gt      lt input type  file  name  fileUpload  id  fileUpload  size  23    gt   lt  form gt    and an ajax request    ajax       url    lt   Url Action  JsonSave   Survey      gt        dataType   json       processData  false      contentType   multipart mixed       data            Id  selectedRow Id          Value   some date was added by the user here                 cache  false      success  function  data           but there is no file in the Request Files  Whats wrong with the ajax request

User · Answer

AJAX file uploads are now possible by passing a FormData object to the data property of the $.ajax request.

As the OP specifically asked for a jQuery implementation, here you go:

<form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST">
    <input type="file" name="fileUpload" id="fileUpload" size="23" /><br />
    <button>Upload!</button>
</form>

$('#upload').submit(function(e) {
    e.preventDefault(); // stop the standard form submission

    $.ajax({
        url: this.action,
        type: this.method,
        data: new FormData(this),
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data.UploadedFileCount + ' file(s) uploaded successfully');
        },
        error: function(xhr, error, status) {
            console.log(error, status);
        }
    });
});

public JsonResult Survey()
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        var file = Request.Files[i];
        // save file as required here...
    }
    return Json(new { UploadedFileCount = Request.Files.Count });
}

More information on FormData at MDN

User · Answer

You can t upload files via ajax  you need to use an iFrame or some other trickery to do a full postback   This is mainly due to security concerns   Here s a decent write-up including a sample project using SWFUpload and ASP Net MVC by Steve Sanderson   It s the first thing I read getting this working properly with Asp Net MVC  I was new to MVC at the time as well   hopefully it s as helpful for you

User · Answer

Upload files using AJAX in ASP Net MVC  Things have changed since HTML5  JavaScript  document getElementById  uploader   onsubmit   function          var formdata   new FormData      FormData object     var fileInput   document getElementById  fileInput          Iterating through each files selected in fileInput     for  i   0  i  lt  fileInput files length  i                Appending each file to FormData object         formdata append fileInput files i  name  fileInput files i                Creating an XMLHttpRequest and sending     var xhr   new XMLHttpRequest        xhr open  POST     Home Upload        xhr send formdata       xhr onreadystatechange   function              if  xhr readyState    4  amp  amp  xhr status    200                alert xhr responseText                       return false         Controller  public JsonResult Upload         for  int i   0  i  lt  Request Files Count  i                  HttpPostedFileBase file   Request Files i     Uploaded file           Use the following properties to get file s name  size and MIMEType         int fileSize   file ContentLength          string fileName   file FileName          string mimeType   file ContentType          System IO Stream fileContent   file InputStream            To save file  use SaveAs method         file SaveAs Server MapPath        fileName      File will be saved in application root           return Json  Uploaded     Request Files Count     files        EDIT   The HTML   lt form id  uploader  gt       lt input id  fileInput  type  file  multiple gt       lt input type  submit  value  Upload file    gt   lt  form gt

User · Answer

If you posting form using ajax then you can not  send image using   ajax method  you have to use  classic xmlHttpobject  method for saving image  other alternative of it use submit type  instead of  button

User · Answer

I have a sample like this on vuejs version  v2 5 2   lt form action  url  method  post  enctype  multipart form-data  gt       lt div class  col-md-6  gt           lt input type  file  class  image 0  name  FilesFront  ref  FilesFront    gt       lt  div gt       lt div class  col-md-6  gt           lt input type  file  class  image 1  name  FilesBack  ref  FilesBack    gt       lt  div gt   lt  form gt   lt script gt  Vue component  v-bl-document         template    document-item-template       props    doc        data  function              return               document  this doc                       methods            submit  function                  event preventDefault                 var data   new FormData                var  doc   this document              Object keys  doc  forEach function  key                    data append key   doc key                                var  refs   this  refs              Object keys  refs  forEach function  key                    data append key   refs key  files 0                                 debugger                ajax                   type   POST                   data  data                  url  url                  cache  false                  contentType  false                  processData  false                  success  function  result                          do something                                                          lt  script gt

[jquery] jQuery ajax upload file in asp.net mvc

Examples related to jquery

Examples related to asp.net-mvc

Examples related to ajax