Javascript：從瀏覽器中刪除圖像

以下是我從Internet上覆制的代碼，以便在上載到服務器之前顯示圖像的預覽。如果我點擊上傳圖片，它會觸發輸入元素上的點擊事件並上傳圖片。同樣，如果我在刪除刪除我想要從輸入元素或Web存儲本身刪除它，我想刪除只有特定的圖像，以便它不會被服務器處理。Javascript：從瀏覽器中刪除圖像

<input type="file" id="files" /> 
<img id="image" /> 
<div id="uploadimage"> upload image</div> 
<a href="#"> Delete</a> 

<script> 
document.getElementById("uploadimage").onclick=function(){ 
    document.getElementById("files").click(); 
}; 
document.getElementById("files").onchange = function() { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     // get loaded data and render thumbnail. 
     document.getElementById("image").src = e.target.result; 

    }; 

    // read the image file as a data URL. 
    reader.readAsDataURL(this.files[0]); 
}; 
</script>

在此先感謝

來源

2016-03-18 v Sugumar

'this.files'是隻讀只有..你不能更新它..你可以從'DOM'中移除元素，並在隱藏的'input'元素的某處保存這個狀態，並避免在服務器上操縱它。 – Rayon

@RayonDabre，除了清除它：'this.value ='''=>'this.files = []'但沒有辦法清除多文件輸入中的單個文件。唯一的方法是將你的文件存儲在一個數組中，然後用'FormData'對象將所需的文件發佈到服務器。但有一個它的欺騙，讓我找出它... – Kaiido

@Kaiido謝謝兄弟我會嘗試它，併發回 –

您可以添加id屬性鏈接並完成JavaScript和下面的代碼：

document.getElementById("delete").onclick = function() { 
    document.getElementById("image").src = null; 
    document.getElementById("files").value = ''; 
    return false; 
};

jsfiddle

來源

2016-03-18 09:59:36

Javascript：從瀏覽器中刪除圖像

回答

相關問題