jQuery圖像預覽，可上傳多個圖像

Question

我在圖片上傳器中使用以下代碼：

HTML：

<input type="file" id="files" name="files[]" multiple />
<ul id="list"></ul>

JS：

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

for (var i = 0, f; f = files[i]; i++) {

  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      var li = document.createElement('li');
      li.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/><input type="text" class="rename" name="',i,'" value="',escape(theFile.name),'"><input type="text" class="reorder" name="',i,'" value="',i,'">'].join('');
      document.getElementById('list').insertBefore(li, null);
    };
  })(f);

  reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

我的問題是，當它到達reader.onload時，就完成了for循環，所以我= #of圖像而不是圖像＃如我所願。 有什么辦法可以解決這個問題，所以我輸入的名稱是它們旁邊的圖像的圖像編號？

Answer 1

reader.onload運行的次數與上傳圖片的次數相同。

var x = 0;
  reader.onload = (function(theFile) {
    return function(e) {

      console.log(x);

      x++;

    };
  })(f);

Answer 2

您已經有了f的解決方案。 您可以為i做完全相同的事情：將其傳遞給處理程序的閉包：

  reader.onload = (function(theFile, i) {
    return function(e) {
      var li = document.createElement('li');
      li.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/><input type="text" class="rename" name="',i,'" value="',escape(theFile.name),'"><input type="text" class="reorder" name="',i,'" value="',i,'">'].join('');
      document.getElementById('list').insertBefore(li, null);
    };
  })(f, i);