iT邦幫忙

2

javascript 程式碼有些地方看不懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .thumb {
            height: 75px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
        }
    </style>
</head>
<body>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
</body>
</html>
<script>
  document.getElementById('files').addEventListener('change', handleFileSelect, false);

  function handleFileSelect(evt) {
    var files = evt.target.files;
    console.log(files);
    for (var i = 0, file; file = files[i]; i++) {
      console.log(file);
      
      if (!file.type.match('image.*')) {
        continue;
      };
      var reader = new FileReader();    //新建一個 FileReader,為了在onload取得值
      reader.onload = function(theFile) {  //onload時取得FileList
          return function(e) {
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join(''); //寫入HTML
          //e.target.result change時,取得的結果
          document.getElementById('list').insertBefore(span, null);
        };
      }(file);
      reader.readAsDataURL(file);
    }
  }
</script>
  1. return function(e)裡的e是甚麼
  2. for迴圈{}後的(file)是什麼意思
  3. reader.readAsDataURL(file);為甚麼是放在最後面
  4. evt所接收到的是change事件嗎?
淺水員 iT邦新手 3 級 ‧ 2019-07-12 17:03:01 檢舉
另外問一下,你知道為什麼需要 return function 嗎?
這邊有 closure 的概念...
cheer0101 iT邦新手 5 級 ‧ 2019-07-13 09:34:08 檢舉
不太清楚ㄟ 可以麻煩大大解答嗎?
淺水員 iT邦新手 3 級 ‧ 2019-07-13 18:45:09 檢舉
可以想一下下面這個為什麼結果是那樣
https://codepen.io/anon/pen/ydWBjM?editors=1011

closure 中文應該是閉包。
因為不是很好說明,也許你可以先查一下相關資料,如果有問題再問吧。

2 個回答

6
dragonH
iT邦高手 1 級 ‧ 2019-07-12 14:21:19
最佳解答

codepen

1 .

return function(e)裡的e是甚麼

reader.onload 的 event

2 .

for迴圈{}後的(file)是什麼意思

for迴圈{}後沒有(file)/images/emoticon/emoticon06.gif
reader.onload 後面倒是有一個

參考

3 .

reader.readAsDataURL(file);為甚麼是放在最後面

不是因為它需要被放在最後面

而是因為 onload 需要先定義

參考

4 .

evt所接收到的是change事件嗎?

fillano iT邦超人 1 級 ‧ 2019-07-12 14:42:22 檢舉

補充:
for迴圈的三個部份:for(宣告變數及其初始值表示式 ; 迴圈結束條件表示式 ; 每次迴圈結束時要做的運算表示式) {...}

迴圈結束條件表示式是依照最後運算結果是true還是false來判斷,在本例就是file變數的值。當i的值超過files陣列大小時,file變數的值就是undefined,undefined轉換成布林值就是false,所以就跳出迴圈。

dragonH iT邦高手 1 級 ‧ 2019-07-12 15:22:23 檢舉

/images/emoticon/emoticon32.gif

2
淺水員
iT邦新手 3 級 ‧ 2019-07-12 14:37:28
  1. return function(e)裡的e是甚麼

FileReader 的 event 物件,當資料讀取完畢會產生這個 event 物件,作為參數傳給 function
在上面的例子也就是那個 e

  1. for迴圈{}後的(file)是什麼意思

<input type="file"> 選擇檔案後,產生 change 事件。
因此 function handleFileSelect(evt) 的 evt 會有該事件的相關資訊
evt.target 代表事件發生的元素,也就是 <input type="file"> 本身
所以 evt.target.files 會是一個類似陣列(array like)的資料
裡面的每個元素 (evt.target.files[i]) 代表選擇的其中一個檔案
所以你問的 file 就是 evt.target.files[i]

  1. reader.readAsDataURL(file);為甚麼是放在最後面

這是非同步處理的狀況,javascript 常常會遇到非同步處理
(例如 setTimeout、ajax 等)
這時我們會先告訴程式(員工)說「當你完成了XXX之後,要做些甚麼」(reader.onload=....)
然後才說「我說完了,去做你的工作吧」(reader.readAsDataURL)

  1. evt所接收到的是change事件嗎?

是,剛剛第 2 點提到了。

我要發表回答

立即登入回答