javascript 程式碼有些地方看不懂

javascript

豬豬人 2019-07-12 14:05:39 ‧ 5754 瀏覽

<!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>

return function(e)裡的e是甚麼
for迴圈{}後的(file)是什麼意思
reader.readAsDataURL(file);為甚麼是放在最後面
evt所接收到的是change事件嗎?

淺水員 iT邦大師 6 級 ‧ 2019-07-12 17:03:01 檢舉

另外問一下，你知道為什麼需要 return function 嗎？
這邊有 closure 的概念...

豬豬人 iT邦新手 4 級 ‧ 2019-07-13 09:34:08 檢舉

不太清楚ㄟ可以麻煩大大解答嗎?

淺水員 iT邦大師 6 級 ‧ 2019-07-13 18:45:09 檢舉

可以想一下下面這個為什麼結果是那樣
https://codepen.io/anon/pen/ydWBjM?editors=1011

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

dragonH

iT邦超人 5 級 ‧ 2019-07-12 14:21:19

最佳解答

codepen

1 .

return function(e)裡的e是甚麼

reader.onload 的 event

2 .

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

for迴圈{}後沒有(file)
reader.onload 後面倒是有一個

參考

3 .

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

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

而是因為 onload 需要先定義

參考

4 .

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

是

回應 2
分享
檢舉

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

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

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

dragonH iT邦超人 5 級 ‧ 2019-07-12 15:22:23 檢舉

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2019-07-12 14:37:28

return function(e)裡的e是甚麼

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

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]

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

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