使用PHP和jQuery上传图像时声明新的formData（）

Question

我正在尝试使用PHP和jQuery上传图像，但是我收到以下javascript错误：

  

TypeError：对未实现接口FormData的对象调用'append'   ...d=[],e=function(a,b){b=n.isFunction(b)?b():null==b?"":b,d[d.length]=encodeURICom...

我的代码出了什么问题？

HTML：

<form id="uploadForm" name="form_movie" method="post" action="index.php" class="form form-default">
 <input id="file-upload" name="userImage" type="file" class="inputFile" />
<input id="upload-image" type="button" value="Upload Image" class="btnSubmit" />

jQuery的：

$(document).ready(function (e) {
$( "#upload-image" ).click(function( e ) {
     var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file-upload', file_data);
    // alert('s'+imageData);
    console.log(form_data);
        movie_name = $('#movie_name').val(); 
        if (movie_name == '') {
            alert('Movie name canot be empty');
        } else {
            $.ajax({
                url: "up.php",
                type: "POST",
                data:  form_data,
                success: function(data)
                {
                    $("#targetLayer").html(data);
                },
                error: function() 
                {
                }           
           });
        }

});
});

Answer 1

要使用$ .ajax上传文件，您需要将错误和 contentType 选项的 processData 选项设置为 false

    $(document).ready(function (e) {
$( "#upload-image" ).click(function( e ) {
     var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file-upload', file_data);
    // alert('s'+imageData);
    console.log(form_data);
        movie_name = $('#movie_name').val(); 
        if (movie_name == '') {
            alert('Movie name canot be empty');
        } else {
            $.ajax({
                url: "up.php",
                type: "POST",
                data:  form_data,
                processData: false,
                contentType: false,
                success: function(data)
                {
                    $("#targetLayer").html(data);
                },
                error: function() 
                {
                }           
           });
        }

});
});