AJAX nicht Image-Datei auf Server

Question

Senden

diesen AJAX-Code So:

var btn = $("input[name=submitname]"); 
     var url = btn.parents("form").attr("action"); 
      var fileName = btn.parents("form").find("input[type=file]").attr("name"); 
      var fileVal = btn.parents("form").find("input[type=file]").val(); 
     var dataString = btn.parents("form").serialize() + "&" + btn.attr("name") + "=" + btn.val() + "&" + fileName + "=" + fileVal; 
      $.ajax({ 
       url: url, 
       type: "POST", 
       data: dataString, 
       processData: false, 
       contentType: false, 
       cache: false, 
       success: function(data){ 
        console.log(data); 
       }, error: function(errData){ 
        console.log("error:"); 
        console.log(errData); 
       } 
      }); 

nicht die Datei an den Server gesendet zu werden scheint. Was mache ich falsch?

Answer 1

Um eine Datei mit Ajax zu veröffentlichen, sollten Sie FormData verwenden.

https://developer.mozilla.org/en-US/docs/Web/API/FormData

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Answer 2

sollten Sie FormData stattdessen verwenden.

var btn = $("input[name=submitname]"); 
    var formData = new FormData(); // CREATE FORM DATA OBJECT 
    var fileUpload = btn.parents("form").find("input[type=file]").get(0); // your file element 
    var fileName = btn.parents("form").find("input[type=file]").attr("name"); 
    var files = fileUpload.files; 
    formData.append(fileName , files[0]); 
      // add your all form elements to FormData object like following 
      // formData.append("key",value);   

      var url = btn.parents("form").attr("action"); 


       $.ajax({ 
        url: url, 
        type: "POST", 
        data: formData , 
        processData: false, 
        contentType: false, 
        cache: false, 
        success: function(data){ 
         console.log(data); 
        }, error: function(errData){ 
         console.log("error:"); 
         console.log(errData); 
        } 
       }); 

können Sie folgenden Code verwenden, um zu konvertieren $(form).seralizedArray() zu FormData

function ConvertToFormData(serializedArray, fileInputID) 
{ 
var formData = new FormData(); 
//var serializedArray = $("form").serializeArray(); 
for(var i = 0; i < serializedArray.length;i++) 
{ 
    if(serializedArray[i].name != "FILE_INPUT_ELEMENT") // don't add file input here 
    formData.append(serializedArray[i].name,serializedArray[i].value); 

} 

var fileUpload = $(fileInputID).get(0); // your file element 
       var files = fileUpload.files; 
       formData.append(fileInputID, files[0]); 
return formData; 
} 

Verbrauch:

var data = ConvertToFormData($("form").serializeArray(),"Your_file_input_id"); 

Answer 3

Ich benutze die FileReader, Sie davon gehört könnten:

<input type="file" id="f" /> 

function ajaxLoad(event){ 
    var binary = new Int8Array(event.target.result); 
    $.ajax({ 
    url: '/img', 
    type: 'POST', 
    processData: false, 
    contentType: 'application/octet-stream',  // means uploading-type 
    data: binary 
    }); 
} 
function fileChangeEvent(event){ 
    var reader = new FileReader(); 
    reader.onload = ajaxLoad; // reference to function 
    reader.readAsArrayBuffer(event.target.files[0]); 
} 
$('#f').change(fileChangeEvent); 

Und wenn Sie mit Spring:

@RequestMapping(value="/img", method=RequestMethod.POST, 
       consumes=MimeTypeUtils.APPLICATION_OCTET_STREAM_VALUE) 
public void smallImageInsert(@RequestBody final byte[] binaryFileData) { 
    // exact bytes from client!!! 
}