AJAX not sending image file to server

问题

So this ajax code:

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

doesn't seem to be sending the file to the server. What am I doing wrong?

回答1:

You should use FormData instead.

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

You can use following code to convert $(form).seralizedArray() to 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;
}

Usage:

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

回答2:

To post a file with Ajax, you should be using FormData.

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

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

回答3:

I use the FileReader, you might heard of it:

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

And if you are using Spring:

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

来源：https://stackoverflow.com/questions/41767372/ajax-not-sending-image-file-to-server