jQuery ajax upload plików w ASP.NET MVC

Question

Mam plik moim zdaniem

<form id="upload" enctype="multipart/form-data"> 
    <input type="file" name="fileUpload" id="fileUpload" size="23" /> 
</form> 

i ajax żądanie

$.ajax({ 
    url: '<%=Url.Action("JsonSave","Survey") %>', 
    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) {} 
}); 

ale nie ma pliku w Request.Files. Co jest nie tak z prośbą o ajax?

Answer 1

Upload files using AJAX in ASP.Net MVC

Wiele się zmieniło od 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 < 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 && xhr.status == 200) { 
      alert(xhr.responseText); 
     } 
    } 
    return false; 
} 

Controller

public JsonResult Upload() 
{ 
    for (int i = 0; i < 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: HTML

<form id="uploader"> 
    <input id="fileInput" type="file" multiple> 
    <input type="submit" value="Upload file" /> 
</form> 

Answer 2

Nie można przesyłać plików za pośrednictwem ajax, należy użyć ramki iFrame lub innej sztuczki, aby wykonać pełny odświeżenie. Wynika to głównie z obaw związanych z bezpieczeństwem.

Here's a decent write-up including a sample project przy użyciu SWFUpload i ASP.Net MVC przez Steve Sanderson. To pierwsza rzecz, którą przeczytałem, aby działało poprawnie z Asp.Net MVC (w tym czasie byłem też nowym MVC), mam nadzieję, że jest to dla ciebie pomocne.

Answer 3

Jeśli wysyłania formularza za pomocą ajax następnie można nie wysyłania obrazu przy użyciu $ .ajax metodę trzeba użyć klasyczną metodę XmlHttpObject do zapisywania obrazu, inna alternatywa go używać zamiast przedstawić rodzaj przycisku

Answer 4

załadowania pliku AJAX są obecnie możliwe poprzez przepuszczenie FormData obiekt na własność wniosek $.ajaxdata.

Jako OP specjalnie poprosił o realizacji jQuery, tutaj przejść:

<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 }); 
} 

Więcej informacji na FormData at MDN

Answer 5

Mam próbkę takiego wersji vuejs: v2 .5.2

<form action="url" method="post" enctype="multipart/form-data"> 
    <div class="col-md-6"> 
     <input type="file" class="image_0" name="FilesFront" ref="FilesFront" /> 
    </div> 
    <div class="col-md-6"> 
     <input type="file" class="image_1" name="FilesBack" ref="FilesBack" /> 
    </div> 
</form> 
<script> 
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 
       }, 

      }); 
     } 
    } 
}); 
</script>