Question

我有一个文件上传表单：

<form class="uploadFile" name="uploadFile" method="post" action="process/uploadBuildImages.php" enctype="multipart/form-data">
  <div class="uploadImageButton">Upload Image</div>
  <input type="file" id="fileUpload" class="fileUpload" name="picture">
</form>

我通过ajax和formData发布此表单，如下所示：

var form = $('.uploadFile')[0];
var formData = new FormData(form);

问题是我在同一页面上最多可以输出4次相同的表单输出。我正在制作一个带有博客文章的CMS，每个博客文章都有上传图片表格。

如何仅从当前发布的表单中定位和发布？我知道它的使用＆＃39; this.form等，但总是与.next / nearest等斗争。很快就会看到它。

如果我在页面上只有这个表单的一个实例，那么它工作正常，但否则我得到一个没有文件选择错误。

谢谢！

供参考，完整的JS：

$(document).ready(function(){
  $('.uploadFile').submit(function(){
    var form = $('.uploadFile')[0];
    var formData = new FormData(form);
    $.ajax({
        type: "POST",
        url: "process/uploadBuildImages.php",
        data: formData,
        dataType: "json",
        contentType: false,
        processData: false,
        success: function(response){
            // actions
        }

    }
  });
}):

页面上至少有4个相同的div结构，其格式如下：

<div class="blogtest" id="'.$postID.'">
    <div class="text">
        <div class="postoverlay"></div>
        <div class="buildtext" id="'.$postTextID.'">'.$convertedtext.'</div>
        <form class="uploadFile" name="uploadFile" style="display:$showUploadForm;" method="post" action="process/uploadBuildImages.php" enctype="multipart/form-data">
            <input type="hidden" name="MAX_FILE_SIZE" value="30000000" />
            <div class="uploadImageButton">Upload Image</div>
            <input type="file" id="fileUpload" class="fileUpload" name="picture">
        </form>
        <form class="updatepost" id="'.$postContentID.'" method="post">
            <div class="editor">
                            <textarea name="muffin" id="'.$ckEID.'" class="ckeditor">'.$textFiltered.'</textarea>
            </div>
        </form>
    </div>
</div>

Answer 1

回应我在评论中做出的相同诊断，你在函数调用中缺少上下文 - 你的代码基本上以类.uploadFile提交所有表单的表单数据，无论提交哪一个：

var form = $('.uploadFile')[0]; // Problematic line

您应该使用$(this)在触发提交上下文时为其提供上下文，以便您只从事件源自的表单提交表单数据，而不是提交与该类的所有表单。因此，您可以替换：

var form = $('uploadFile')[0];

使用：

// Alternative 1
var form = $(this)[0];

// Alternative 2
var form = this;

换句话说：

$(document).ready(function(){
  $('.uploadFile').submit(function(){
    var form = this; // Fixed line
    var formData = new FormData(form);
    $.ajax({
        type: "POST",
        url: "process/uploadBuildImages.php",
        data: formData,
        dataType: "json",
        contentType: false,
        processData: false,
        success: function(response){
            // actions
        }
    }
  });
});

您可以在jQuery here和here中了解$(this)的更多信息。

使用＆＃39;这个＆＃39;使用formData仅从当前表单发布

1 个答案: