de carga de archivos Ajax jQuery en asp.net mvc

Question

Tengo un archivo en mi opinión

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

y una petición AJAX

$.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) {} 
}); 

pero no hay ningún archivo en los Request.Files. ¿Qué pasa con la solicitud de Ajax?

Answer 1

Upload files using AJAX in ASP.Net MVC

Las cosas han cambiado desde 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; 
} 

controlador

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

EDITAR: El HTML

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

Answer 2

No puede cargar archivos mediante ajax, necesita utilizar un iFrame u otro truco para hacer una devolución de datos completa. Esto se debe principalmente a problemas de seguridad.

Here's a decent write-up including a sample project utilizando SWFUpload y ASP.Net MVC de Steve Sanderson. Es lo primero que leo para que funcione correctamente con Asp.Net MVC (en ese momento también era nuevo para MVC), espero que sea tan útil para usted.

Answer 3

Si la publicación de formulario utilizando Ajax, entonces puede no de envío de imágenes utilizando el método $ .ajax, usted tiene que utilizar el método clásico para xmlHttpobject de guardar la imagen, otra alternativa de que el uso someter tipo en lugar del botón

Answer 4

la carga de archivos AJAX son ahora posibles pasando un objeto FormData a la propiedad data de la solicitud $.ajax.

A medida que la OP se le preguntó específicamente para una aplicación de jQuery, Aquí van:

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

Más información sobre FormData at MDN

Answer 5

tengo una muestra de este tipo en la versión 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>