如何讓此腳本只刪除一個圖像？

-3

此腳本允許在上傳前預覽/刪除圖像（通過單擊圖像）。我唯一的問題是，當我點擊圖像將其刪除時，它會刪除這兩個圖像。如何讓此腳本只刪除一個圖像？

形式：

<form action="" method="POST" enctype="multipart/form-data"> 
<input type="file" style="display:none" id="upload-image" multiple="multiple" name="upload[]"></input> 
<div id="upload" class="drop-area"> 
    Upload File 
</div> 
<div id="thumbnail"></div> 
<input type="submit" value="Submit" class="button" name="lesubmit"/> 
</form>

JS：

jQuery(function($){ 
var fileDiv = document.getElementById("upload"); 
var fileInput = document.getElementById("upload-image"); 
console.log(fileInput); 
fileInput.addEventListener("change",function(e){ 
    var files = this.files 
    showThumbnail(files) 
},false) 

fileDiv.addEventListener("click",function(e){ 
    $(fileInput).show().focus().click().hide(); 
    e.preventDefault(); 
},false) 

fileDiv.addEventListener("dragenter",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
},false); 

fileDiv.addEventListener("dragover",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
},false); 

fileDiv.addEventListener("drop",function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    showThumbnail(files) 
},false); 

function showThumbnail(files){ 
    for(var i=0;i<files.length;i++){ 
    var file = files[i] 
    var imageType = /image.*/ 
    if(!file.type.match(imageType)){ 
     console.log("Not an Image"); 
     continue; 
    } 

    var image = document.createElement("img"); 
    // image.classList.add("") 
    var thumbnail = document.getElementById("thumbnail"); 
    image.file = file; 
    thumbnail.appendChild(image) 

    var reader = new FileReader() 
    reader.onload = (function(aImg){ 
     return function(e){ 
     aImg.src = e.target.result; 
     }; 
    }(image)) 
    var ret = reader.readAsDataURL(file); 
    var canvas = document.createElement("canvas"); 
    ctx = canvas.getContext("2d"); 
    image.onload= function(){ 
     ctx.drawImage(image,100,100) 
    } 
    } 
} 

$('#thumbnail').on("click", function() { 
    $('#thumbnail').fadeOut(1000, function() { 
     $(this).removeProp('src'); 
     $('img').replaceWith(selected_photo = $('img').clone(true)); 
    }); 
}); 

      });

所有的建議表示讚賞！

來源

2016-02-19 Hunterisabeast

我認爲其實有些事情是錯誤的。您正在淡出您的縮略圖div，這是您所有圖像的容器。此外，您正在刪除同一個div上的源屬性（div不使用src屬性，因此無所作爲），然後當您在圖像上執行replaceWith（）時，將選擇所有標記，而不是隻是被點擊的那一個。 – mhodges

按我的意見，你會想要做類似如下：

$("#thumbnail").on("click", "img", function() { 
    var image= $(this); 
    image.fadeOut(1000, function() { 
    image.removeProp('src').replaceWith(selected_photo = image.clone(true); 
    }); 
});

這實際上將淡出出來的圖像，從圖像中刪除的源屬性，並用克隆來替換它。我仍然不明白你正在進行的replaceWith（），所以你可能需要稍微調整一下，但其他的應該對你有所幫助。

來源

2016-02-19 16:55:12 mhodges

似乎禁用文件上傳。但我會考慮replaceWith。謝謝。 – Hunterisabeast

如何讓此腳本只刪除一個圖像？

回答

相關問題