通过拖放附加文件时FormData发送空白文件字段

Question

我有一个允许拖放功能的照片上传页面。

表格在这里：

<form id="Upload" method="post" action="sessionapi/UserPicture/Upload" enctype="multipart/form-data">
  <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
  <input type="hidden" name="UserPictureReferenceID" value="<%=mPictureGalleryCvm.UserPictureReference.UserPictureReferenceID%>" />
  <input type="hidden" name="UserPictureReferenceType" value="<%=mPictureGalleryCvm.UserPictureReference.UserPictureReferenceType%>" />
  <div id="photoUploadArea" class="hide">
    <div id="photoDropArea">
      <h2>Add Up to 10 photos</h2>
      <p class="subTitle">Your file must be a JPEG, PNG, or GIF</p>
      <p><img src="img/mascotLeftNoResults.png" /></p>
      <h3>Drag and Drop Photos Here</h3>
      <div class="hr-line">
         <h3><span>OR</span></h3>
      </div>
      <div id="photoUploadButton">
        <input id="files" class="fileUploadInput hide" type="file" multiple="">
        <button class="fileBrowserButton" type="submit" value="submit"><span>Browse Files</span></button>
		<script>
		    $('.fileBrowserButton').on('click', function (e) {
		        e.preventDefault();
		        $("#file").click();
		    })
		</script>
      </div>
    </div>
  </div>
</form>

通过AJAX发送数据的功能在这里：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var ajaxData = new FormData($form.get(0)),
        $input = $form.find('input[type="file"]'),
        files;
    if (evt.type == 'change') files = evt.target.files;
    else files = evt.originalEvent.dataTransfer.files; // FileList object.
    for (var i = 0, f; f = files[i]; i++) { //Loop through selected images
        if (!f.type.match('image.*')) { //check file is an image
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                if (files && evt.type != 'change') {
                    $.each(files, function (i, file) { //problem is here
                        ajaxData.append($input.attr('name'), file);
                    });
                }
                $.ajax({
                    url: 'sessionapi/UserPicture/Upload',
                    method: 'POST',
                    data: ajaxData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        console.log(data);
                    }
                })
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

代码的问题在于JS代码中的区域：

$.each(files, function (i, file) {
    ajaxData.append($input.attr('name'), file);
});

ajaxData 为拖入的新文件将文件输入附加到 FormData。但是，当通过 ajax 提交文件时，它会发送表单中已经存在的空白“文件”输入。我需要在拖放时发送所有字段减去空白文件字段。我该怎么做呢？

Answer 1

您是否尝试将 html 表单属性添加到文件输入？如果你指定一个不同的表单名称，它应该被这个忽略。

<input id="files" form="someRandomName" ... >

编辑：

是的，如果输入不带表单属性，您也可以删除它。