如何在多個文件上傳中從jQuery中刪除單個上傳的文件

Question

我到處搜索過，仍然沒有得到想要的東西。

我一直在關注輸入字段。

<div class="form-group gallery-add-button">
    <label class="col-form-label" for="images">Image Gallery</label>
    <div class="gallery-item-wrapper-0">
        <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" />
    </div>
</div>

我已經進行了圖像預覽，並在“刪除”按鈕上單擊，就刪除了圖像預覽。 在這種情況下，我也想從文件上傳字段中刪除上傳的圖像。 有什么辦法可以做到這一點。

我找到了一種刪除所有上載文件但不刪除特定圖像的方法。

感謝您提供任何幫助，如果您需要更多信息，請隨時詢問。

Answer 1

我有一個刪除圖像的例子，希望對您有所幫助。

  // Multiple images preview in browser var imagesPreview = function(input, placeToInsertImagePreview) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { var htmlImage = '<div>'; htmlImage = htmlImage + '<img src="'+event.target.result+'" />'; htmlImage = htmlImage + '<input onclick="removeImage($(this))" type="button" value="Delete" />'; htmlImage = htmlImage + '</div>'; $($.parseHTML(htmlImage)).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; function removeImage(item) { //alert(item); item.parent().remove(); } $('#photo-gallery').on('change', function() { imagesPreview(this, 'div.gallery'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="form-group gallery-add-button"> <label class="col-form-label" for="images">Image Gallery</label> <div class="gallery-item-wrapper-0"> <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" /> <div class="gallery"></div> </div> </div>

Answer 2

我快速編寫了這段代碼，希望對您有所幫助
如果這是您需要的並且需要幫助，我會做

 var files=[]; $("#photo-gallery").change(function(){ for(var i=0;i<this.files.length;i++){ files.push(this.files[i]); } refreshFiles(); $(this).val(''); }); function refreshFiles(){ for(var i=0;i<files.length;i++){ $("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>'); } } $(document).on('click','.delete-image',function(){ var id=parseInt($(this).attr("image-id")); files.splice(id,1); $("#result").empty(); refreshFiles(); }); $(document).on('click','a',function(){ if($(this).attr("href")==="#"){ return false; } });

 body{ font-family:arial; } #result{ margin:4px 0; } .img-div{ position:relative; display:block; width:200px; height:40px; line-height:40px; margin:4px 0; border:1px solid #999; border-radius:6px; padding:0 8px; } .delete-image{ position:relative; display:inline-block; float:right; height:40px; line-height:40px; margin-left:20px; text-decoration:none; padding:0 8px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="form-group gallery-add-button"> <label class="col-form-label" for="images">Image Gallery</label> <div class="gallery-item-wrapper-0"> <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" /> </div> </div> <div id="result"></div> </body>

Answer 3

這是完整的示例，我對其進行了測試，並且可以正常工作
確定您無法在此處測試上傳，但可以在本地服務器上嘗試

 var files=[]; $("#photo-gallery").change(function(){ for(var i=0;i<this.files.length;i++){ files.push(this.files[i]); } refreshFiles(); }); function refreshFiles(){ for(var i=0;i<files.length;i++){ $("#result").append('<div class="img-div"><span>'+(i+1)+'. '+files[i].name+'</span><a href="#" title="delete" class="delete-image" image-id="'+i+'">x</a></div>'); } } $(document).on('click','.delete-image',function(){ var id=parseInt($(this).attr("image-id")); files.splice(id,1); $("#result").empty(); refreshFiles(); }); $(document).on('click','a',function(){ if($(this).attr("href")==="#"){ return false; } }); $(document).on('click','#submit',function(){ if(files.length===0){ return false; } var fd=new FormData(); for(var i=0;i<files.length;i++){ fd.append('img_'+i,files[i]); } $.ajax({ url:"upload-images.php", method:"post", cache:false, dataType:'json', processData:false, contentType:false, data: fd, success: function(data){ console.log(data); } }); });

 .img-div{ position:relative; display:block; width:300px; height:40px; line-height:40px; margin:4px 0; border:1px solid #999; border-radius:6px; padding:0 8px; } .delete-image{ position:relative; display:inline-block; float:right; height:40px; line-height:40px; margin-left:20px; text-decoration:none; padding:0 8px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group gallery-add-button"> <label class="col-form-label" for="images">Image Gallery</label> <div class="gallery-item-wrapper-0"> <input name="images[]" type="file" multiple class="filestyles gallery-images" id="photo-gallery" /> </div> </div> <div id="result"></div> <br> <button id="submit">submit image</button>

然后在你upload-images.php

foreach($_FILES as $file){
    //your code
}

如何在多個文件上傳中從jQuery中刪除單個上傳的文件

問題描述

3 個解決方案

解決方案1
0 2018-11-23 03:12:16

解決方案2
0 2018-11-23 03:26:36

解決方案3
0 2018-11-23 03:59:09

如何在多個文件上傳中從jQuery中刪除單個上傳的文件

問題描述

3 個解決方案

解決方案1 0 2018-11-23 03:12:16

解決方案2 0 2018-11-23 03:26:36

解決方案3 0 2018-11-23 03:59:09

解決方案1
0 2018-11-23 03:12:16

解決方案2
0 2018-11-23 03:26:36

解決方案3
0 2018-11-23 03:59:09