台灣最大程式設計社群網站
線上人數
954
 
會員總數:241346
討論主題:186911
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> filereader onload 問題
[ 變換順序 ]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
filereader onload 問題
價值 : 50 QP  點閱數:92 回應數:2

樓主

小強
門外漢
0 16
252 16
發送站內信



小弟想請問一下各位朋友~~

我正在做一個上傳檔案的介面~~使用者在選擇檔案時~~網頁會先preview預覽~~
我共做了三個img標籤~~每個都設有id~~這三個標籤是等等要讓圖片預覽顯示的地方

<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
<img id="image1" width="100" height="100" style="border:1px solid black" />
<img id="image2" width="100" height="100" style="border:1px solid black" />
<img id="image3" width="100" height="100" style="border:1px solid black" />
</div>



我的問題在下面~~~
假設我選擇2張照片要上傳~~~迴圈會做2次~~i有0,1~~~
我在reader.onload內~~寫下了 document.getElementById("image"+i).src = e.target.result;
希望每繞行一次就將圖片加到image1, image2中~~~
我在reader.onload放了一個alert(i)~~發現~~~~~上傳兩張圖時alert兩次i都是2~~~
而不是0和1~~所以圖片都加到image2標籤中~~~
請問一下是哪裡要修改嗎~~~謝謝了


<script>
document.getElementById("files").onchange = function (e) {

for (var i = 0; i < e.target.files.length; i++) {
var file = this.files[i];
var reader = new FileReader();

//在下面獲得的i只有一個
reader.onload = function (e) {
alert(i);
// get loaded data and render thumbnail.
document.getElementById("image"+i).src = e.target.result;
};

// read the image file as a data URL.
reader.readAsDataURL(file);


}

};
</script>


搜尋相關Tags的文章: [ filereader ] ,
本篇文章發表於2017-12-06 12:14
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
最有價值解答

迷路
捐贈 VP 給 迷路 檢舉此回應
因為這邊的動作是非同步
在FileReader讀取檔案的同時
迴圈並不會停下,依然在繼續執行
所以,當第一個圖片讀取好,執行到reader.onload這邊時
迴圈已經跑完,因此顯示的i是1

修改方式
你得將動作拉出來單獨執行
試試看下面這樣是否OK

本篇文章回覆於2017-12-07 10:00
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

小強
檢舉此回應
阿~~原來阿~~感謝迷路
本篇文章回覆於2017-12-11 11:56
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
[ 變換順序 ]   
1

回覆
如要回應,請先登入.