帶預覽和刪除的多張圖片上傳，Jquery 和 Javascript

Question

我這里有問題。 我使用此代碼多次選擇和預覽圖像，但我需要刪除選定的圖像。 例如，我 select 5 圖像要預覽，我有預覽但我不喜歡其中一張我想刪除選定的圖片。 在這里，當我單擊刪除圖像時，我剛剛重置。 使用舊代碼（我發表評論）我剛剛隱藏了未刪除的圖像。 我試圖在這里找到解決方案，但它不起作用。

 $(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(); $('#files').val(""); }); /* $(".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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="field" align="left"> <h3>Upload your images</h3> <input type="file" id="files" name="files[]" multiple /> </div>

Answer 1

首先，為$("#files").on("change"之外的刪除按鈕添加一個處理程序，因此處理程序的邏輯將只運行一次。在新處理程序中，您必須找到圖片的索引刪除，然后用過濾后的文件創建一個DataTransfer，最后用DT的文件覆蓋輸入的文件。

$(document).on('click', '.remove', function(){
            var pips = $('.pip').toArray();
            var $selectedPip = $(this).parent('.pip');
            var index = pips.indexOf($selectedPip[0]);

            var dt = new DataTransfer();
            var files = $("#files")[0].files;

            for (var fileIdx = 0; fileIdx < files.length; fileIdx++) {
                if (fileIdx !== index) {
                dt.items.add(files[fileIdx]);
              }
            }

            $("#files")[0].files = dt.files;

            $selectedPip.remove();
          });