AJAX未将图像文件发送到服务器 [英] AJAX not sending image file to server

问题描述

因此，此ajax代码:

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?

推荐答案

您应该改用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

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

用法:

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

这篇关于AJAX未将图像文件发送到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！