在使用PHP和jQuery上传图像时声明新的formData(） - Declaring new formData() while Image uploading using PHP and jQuery

Declaring new formData() while Image uploading using PHP and jQuery

本文关键字：声明 formData 图像 PHP jQuery | 更新日期: 2023-09-27

我正试图使用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() 
                {
                }           
           });
        }
});
});

要使用$.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() 
                {
                }           
           });
        }
});
});