浏览器在代码结果中给出不同的 jquery 错误

Question

我正在尝试使用 jquery、ajax 和 php 使用多个接受输入来验证和上传图像。我添加了正常工作的验证功能，但表单没有提交，chrome和firefox也在控制台中显示不同的错误。

HTML

<form id="promotionImageForm_<?php echo $row['pm_id']; ?>"  autocomplete="off" enctype="multipart/form-data">
    <label>Add More Images</label>
    <input type="file"  name="pm_image[]" class="form-control" multiple="multiple" id="pmMultiImgs_<?php echo $row['pm_id']; ?>" />
    <input type="hidden" name="pm_id" value="<?php echo $row['pm_id']; ?>"  />
    <input type="hidden" name="uploadImageByID" value="uploadImageByID" />
    <button type="button" onclick="return multiImageUpload(<?php echo $row['pm_id']; ?>);" id="pmMultibTn" />Add</button>
</form>

JS函数

function uploadImageByID(formData){
    $.ajax({
        type:'POST',
        url:'response.php',
        data:formData,
        dataType:"json",
        success: function(response){
            $(".pmImgPopNoti").remove();
            if(response.success){
                $(".pmRes_"+promotionImageID).prepend('<div id="login-alert" class="alert alert-success pmImgPopNoti col-sm-12">'+response.success+'</div>');                   
            }
            if(response.error){
                $(".pmRes_"+promotionImageID).prepend('<div id="login-alert" class="alert alert-danger pmImgPopNoti col-sm-12">'+response.error+'</div>');
            }   
        }
    });
}   
function multiImageUpload(pmID){
    $('#promotionImageForm_'+pmID).validate();
    $('#pmMultiImgs_'+pmID).each(function() {
        $(this).rules("add", {
            required: true,
            accept: "image/jpeg, image/pjpeg, image/png",
            messages: {
                accept: "Only jpeg, jpg or png images"
            }
        });
    });
    if ($('#promotionImageForm_'+pmID).valid()) {
        var formDetail = $('#promotionImageForm_'+pmID);
        var formData = new FormData(formDetail);
            uploadImageByID(formData);
            return false;
    }
}

Chrome 显示此错误

未捕获的类型错误：非法调用

FireFox 显示此错误

TypeError：FormData.constructor 的参数 1 未实现接口 HTMLFormElement。 var formData = new FormData(formDetail);

谁能指导我如何解决这个错误。如果有人指导我，我将不胜感激。谢谢你

Answer 1

FormData 对象构造函数需要 form 元素，而不是包含表单的 jQuery 对象。试试这个：

if ($('#promotionImageForm_'+pmID).valid()) {
    var formDetail = $('#promotionImageForm_' + pmID);
    var formData = new FormData(formDetail[0]); // note [0] here
    uploadImageByID(formData);
    return false;
}