帶有預覽和刪除選項的圖像上傳 - Javascript / Jquery

Question

我有下面的代碼可以完美運行並上傳多張圖片。

這是 html 和 jQuery 代碼：

<div class="field" align="left">
            <span>
                <h3>Upload your images</h3>
                <input type="file" id="files" name="files[]" multiple />
            </span>
        </div>

腳本如下：

<style>
    input[type="file"] {

     display:block;
    }
    .imageThumb {
     max-height: 75px;
     border: 2px solid;
     margin: 10px 10px 0 0;
     padding: 1px;
     }
    </style>
    <script type="text/javascript">
    $(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;
                    $("<img></img>",{
                        class : "imageThumb",
                        src : e.target.result,
                        title : file.name
                    }).insertAfter("#files");
               });
               fileReader.readAsDataURL(f);
           }
      });
     } else { alert("Your browser doesn't support to File API") }
    });

    </script>

該代碼添加了多個圖像並顯示了圖像的預覽。 但現在我希望當用戶點擊某個按鈕時，假設刪除上傳的每張圖片，它應該被刪除。 沒有隱藏。

對此的任何幫助將不勝感激！

Answer 1

嘗試添加這個： .click(function(){$(this).remove();}); . 它將通過單擊刪除圖像。

編輯包括改進版本。

編輯 2由於人們一直在問，請參閱有關從 FileList 手動刪除文件的答案（劇透：這是不可能的......）。

 $(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(); }); // Old code here /*$("<img></img>", { class: "imageThumb", src: e.target.result, title: file.name + " | Click to remove" }).insertAfter("#files").click(function(){$(this).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 class="field" align="left"> <h3>Upload your images</h3> <input type="file" id="files" name="files[]" multiple /> </div>

Answer 2

使用它來刪除文件值和文件預覽

$(".remove").click(function(){
        $(this).parent(".pip").remove();
        $('#files').val("");
      });`