複数の画像を選択してプレビューでアップロードする

Question

アップロードのために複数の画像を追加する必要があります。以下は私のフォームです。形式でランコードスニペット `をチェックすると、画像を1枚ずつアップロードすると、プレビュー表示された画像はとなります。（ここでは合計4つの画像がありますが、2つのファイルが表示されます）一度に複数の画像を選択すると、選択した画像は表示されません。

添付の画像には4つの画像が表示されますが、カウントには2つのファイルしか表示されません。これが問題です。

私が知りたいのは、画像を1つずつ選択すると、1つの画像を選択して1つの画像を選択すると、ファイルを増やすことができますか？

$(document).ready(function() { 
 
    if (window.File && window.FileList && window.FileReader) { 
 
    $("#files").on("change", function(e) { 
 
     var files = e.target.files, 
 
     filesLength = files.length; 
 
     for (var i = 0; i < filesLength; i++) { 
 
     var f = files[i] 
 
     var fileReader = new FileReader(); 
 
     fileReader.onload = (function(e) { 
 
      var file = e.target; 
 
      $("<span class=\"pip\">" + 
 
      "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 
 
      "<br/><span class=\"remove\">Remove image</span>" + 
 
      "</span>").insertAfter("#files"); 
 
      $(".remove").click(function(){ 
 
      $(this).parent(".pip").remove(); 
 
      }); 
 
     }); 
 
     fileReader.readAsDataURL(f); 
 
     } 
 
    }); 
 
    } else { 
 
    alert("Your browser doesn't support to File API") 
 
    } 
 
});

input[type="file"] {display: block;} 
 
.imageThumb {max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer;} 
 
.pip {display: inline-block; margin: 10px 10px 0 0;} 
 
.remove { display: block;background: #444;border: 1px solid black;color: white;text-align: center;cursor: pointer;} 
 
.remove:hover {background: white;color: black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Upload your images</h3> 
 
    <input type="file" id="files" name="files[]" multiple /></br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
</div>

Answer 1

あなたがさん<input>ブラウザのデフォルトにのみ、現在のコンテンツが表示されますUIを、依存しているためです。

選択したすべてのファイルをアップロードする場合は、すべての変更を保存する際に、すべてのファイルを保存する配列を作成します。次に、あなたのサーバーに送信する

、あなたはそのsubmitイベントを遮断し、XHRを通して、あなたのファイルでいっぱいFormDataを送信することで、あなたの<form>のデフォルトの動作をブロックします。

$(document).ready(function() { 
 
    // First define the Array where we will store all our files 
 
    var myFiles = []; 
 
    // now, every time the user selects new Files, 
 
    $("#files").on("change", function(e) { 
 
    var files = e.target.files, file; 
 
    // iterate through all the given files 
 
    for (var i = 0; i < files.length; i++) { 
 
     file = files[i]; 
 
     myFiles.push(file); // store it in our array 
 
     $('<span class="pip">' + 
 
     '<img class="imageThumb" ' + 
 
     // no need for a FileReader here, 
 
     // a blobURI is better (sync & uses less memory) 
 
     'src="' + URL.createObjectURL(file) + '" ' + 
 
     'title="' + file.name + '"/>' + 
 
     '<br/>' + 
 
     '<span class="remove">Remove image</span>' + 
 
     '</span>') 
 
     .insertAfter("#files") 
 
     // add the event listener only on the new .remove 
 
     .find(".remove").click(removeFile.bind(null, file)); 
 
    } 
 
    updateCounters(); 
 
    }); 
 

 
    // now override the default form submission 
 
    $('form').on('submit', upload); 
 

 
    // removes both the preview elements from doc and the file from our array 
 
    function removeFile(file, evt) { 
 
    $(evt.target).parent(".pip").remove(); 
 
    myFiles.splice(myFiles.indexOf(file), 1); 
 
    updateCounters(); 
 
    } 
 
    // ... 
 
    function updateCounters() { 
 
    $('#counter').text(myFiles.length + ' files selected'); 
 
    } 
 
    // from submission overriding function 
 
    function upload(evt) { 
 
    evt.preventDefault(); // first block the default event 
 
    var fd = new FormData(); // create a new FormData 
 
    for (var i = 0; i < myFiles.length; i++) { 
 
     fd.append('files[]', myFiles[i]); // append all our files to it 
 
    } 
 
    // Post the formdata through XHR 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('POST', 'YOUR_FORM_ACTION_URL'); 
 
    // if you wanted to do something after the files are submitted 
 
    // xhr.onload = callback; 
 
    xhr.send(fd); 
 
    } 
 
});

input[type="file"] { 
 
    display: block; 
 
} 
 

 
.imageThumb { 
 
    max-height: 75px; 
 
    border: 2px solid; 
 
    padding: 1px; 
 
    cursor: pointer; 
 
} 
 

 
.pip { 
 
    display: inline-block; 
 
    margin: 10px 10px 0 0; 
 
} 
 

 
.remove { 
 
    display: block; 
 
    background: #444; 
 
    border: 1px solid black; 
 
    color: white; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.remove:hover { 
 
    background: white; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Upload your images</h3> 
 
    <span id="counter">0 files selected</span> 
 
    <input type="file" id="files" name="files[]" multiple /><br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
</div>