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> 
 
\t \t <script> 
 
\t \t  $('.fileBrowserButton').on('click', function (e) { 
 
\t \t   e.preventDefault(); 
 
\t \t   $("#file").click(); 
 
\t \t  }) 
 
\t \t </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); 
 
    } 
 
}

問題のwiコード番目のJSコード内の領域である：

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

はajaxDataはでドラッグして新しいファイルのいるFormDataへのファイルの入力を追加しかし、ファイルはAJAXを経由して送信されたとき。既にフォームに入力されている空白の「ファイル」を送信します。空のファイルフィールドを除いたすべてのフィールドをドラッグ＆ドロップで送信する必要があります。これはどうすればいいですか？

Answer 1

htmlフォーム属性をfileinputに追加しようとしましたか？別のフォーム名を指定した場合は、このフォーム名で無視する必要があります。

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

EDIT：それはフォームの属性をとらない場合

はい、あなたはまた、入力を削除することができます。