通過文件上傳在頁面上改變圖像的JS功能

當談到代碼時，我目前相當無知，而且我現在正在自學。我希望能夠在用戶選擇要上傳的文件時更改網頁上的圖像。有很多這樣的例子，我一直在玩這個答案Show an image preview before upload 通過文件上傳在頁面上改變圖像的JS功能

但是我有一個頁面有多個上傳按鈕，每個都有自己的關聯圖像。上面的示例監視特定的輸入文件元素以進行更改，然後觸發並更新圖像元素。

我想創建一個基於上述的JS函數，我將上傳的文件對象和圖像元素ID傳遞給文件輸入元素的onChange事件調用。

感覺好像它應該很簡單，但它突出了我嚴重缺乏理解。任何幫助不勝感激。

編輯：

我想（笑不請...）

HTML

<input type="file" id="file_n" onChange="swapImage(this,'image_n)/> 
<img id="image_n" />

的Javascript

function swapImage(e1, imgID) { 
    var reader = new FileReader(); 

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

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

只是要清楚file_n和image_n應該表示每個的倍數，例如file_1，file_2，file_3 &對應的image_1，image_2，image_3，因此爲什麼在我心目中把它們傳遞給一個函數似乎是一種方式。

來源

2016-11-25 westiej

你有什麼代碼方面試圖迄今訪問？你可以在這裏發佈嗎？ –

我的主要問題是我缺乏JS技能。我試圖使用我鏈接到的原始代碼，但不知道如何使其工作我;我將我的嘗試添加到上面的原始帖子上面 – westiej

這是一個適當的變量命名的工作示例：https：// jsfiddle .net/qzksc9o1/1/ – Hkan

有很多辦法做到這一點取決於你的DOM的樣子。例如查詢文件輸入後的第一個img或它的父母子女，使用id，dataset查詢正確的img元素，使用img的id傳入img元素作爲第二個參數 swapImage(this, image_n)（所有DOM id不覆蓋任何全局變量是不使用任何查詢選擇）

var URL = window.URL || window.webkitURL 
 

 
window.swapImage = function (elm) { 
 
    var index = elm.dataset.index 
 
    // URL.createObjectURL is faster then using the filereader with base64 
 
    var url = URL.createObjectURL(elm.files[0]) 
 
    document.querySelector('img[data-index="'+index+'"]').src = url 
 
}

<input type="file" data-index="0" onChange="swapImage(this)"> 
 
<img src="https://dummyimage.com/50x50/000/fff" data-index="0" width="50" height="50"> 
 

 
<br><br> 
 

 
<input type="file" data-index="1" onChange="swapImage(this)"> 
 
<img src="https://dummyimage.com/50x50/000/fff" data-index="1" width="50" height="50"> 
 

 
<br><br> 
 

 
<input type="file" data-index="2" onChange="swapImage(this)"> 
 
<img src="https://dummyimage.com/50x50/000/fff" data-index="2" width="50" height="50">

來源

2016-11-26 10:51:19 Endless

這正是我之後的事情，非常感謝。我現在可以使用php生成頁面，並在創建頁面時向輸入和圖像添加唯一的數據索引值。 – westiej

以下是預覽圖像的基礎知識。

var m, f, v; 
 

 
f = document.getElementById("files"); 
 
v = document.getElementById("viewport"); 
 

 
f.addEventListener("change", function(e){ 
 
\t m = new FileReader(); 
 
\t m.onload = function(e){ 
 
\t \t v.src = e.target.result; 
 
\t }; 
 
\t m.readAsDataURL(this.files[0]); 
 
});

#viewport{ 
 
    width: 250px; 
 
    height: 250px; 
 
}

<img id="viewport" /> 
 

 
<input type="file" id="files" /> 
 
<img id="image" />

來源

2016-11-25 23:43:32 Gacci

通過文件上傳在頁面上改變圖像的JS功能

回答

相關問題