Question

所以这个ajax代码：

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

似乎没有将文件发送到服务器。我做错了什么？

Answer 1

您应该使用FormData代替。

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

您可以使用以下代码将$(form).seralizedArray()转换为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;
}

用法：

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

Answer 2

要使用Ajax发布文件，您应该使用FormData。

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

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

Answer 3

我使用FileReader，你可能听说过：

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

如果您使用的是Spring：

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

AJAX不将图像文件发送到服务器

3 个答案: