使用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上傳文件，您需要將processData選項設置為false並將contentType選項設置為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() 
                {
                }           
           });
        }

});
});