通過JavaScript循環圖像預覽

我目前正在處理HTML5 API圖像上傳和我有點卡住了一些JavaScript（出路我的舒適區）涉及。通過JavaScript循環圖像預覽

這是我上傳表的片斷（這也涉及到數據收集的這裏沒有顯示的東西像重命名圖像等各圖像）：

<tr> 
<td>Image '.$i.':</td><td><output id="display'.$i.'"></output></td> 
</tr> 

<tr> 
<td>Choose Image:</td> 
<td><input name="file'.$i.'" type="file" id="file'.$i.'" accept="image/*" /></td> 
</tr>

$i是一個PHP的計數器，用戶選擇如何他們將上傳許多照片，並創建許多圖像框。

這是用於顯示圖像預覽的JavaScript：

document.getElementById('file1').addEventListener('change', handleFileSelect, false); 

function handleFileSelect(evt) { 
     var files = evt.target.files; 
     var f = files[0]; 
     var reader = new FileReader(); 

      reader.onload = (function(theFile) { 
       return function(e) { 
        document.getElementById('display1').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join(''); 
       }; 
      })(f); 

      reader.readAsDataURL(f); 
}

我的問題是，作爲一個JavaScript新手，是有循環的簡單方法爲每個圖像的腳本。目前它只會顯示'file1'的預覽，有沒有辦法將'1'改爲用於php循環的$i, $i++？可以說，圖像盒數存儲爲PHP varible $totelboxes

編輯：這就是我至今：

var upFiles = document.getElementsByClassName('upFile'); 

for(var i = 0; i < upFiles.length; i++) 
{ 
    upFiles[i].addEventListener('change', handleFileSelect, false); 

function handleFileSelect(evt) { 
     var files = evt.target.files; 
     var f = files[0]; 
     var reader = new FileReader(); 

      reader.onload = (function(theFile) { 
       return function(e) { 
        document.getElementById('display'+i).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join(''); 
       }; 
      })(f); 

      reader.readAsDataURL(f); 
} 
}

來源

2013-09-11 user2574794

你可以給你所有的文件輸入一個類，然後使用document.getElementsByClassName和for循環。（請注意，這在IE 8的工作，你可能需要一個墊片，但您使用addEventListener可能已經放棄IE8反正見javascript document.getElementsByClassName compatibility with IE。）

例如：

HTML：

<input id="file1" ... class="upFile" /> 
<input id="file2" ... class="upFile" />

的JavaScript：

var upFiles = document.getElementsByClassName('upFile'); 

for(var i = 0; i < upFiles.length; i++) 
{ 
    upFiles[i].addEventListener(/*...*/); 
}

或者，你可以使用jQuery在t他，用你現有的HTML和匹配的ID的第一部分：

$('input[type="file"][id^="file"]').change(handleFileSelect);

這一切都input元素，類型爲「文件」，並開始「文件」的ID相匹配。

來源

2013-09-11 01:15:36

@Ic的點點做的工作。感謝您的迴應。我試圖實現你的代碼，但一定是做錯了。在我的測試頁上，我有4個圖像上傳框，無論選擇哪個圖像，都會在第4個輸出框中顯示預覽。如果我選擇另一個盒子，它仍然會替換第四個圖像。我已經在編輯中添加了這個新代碼。謝謝 – user2574794

您可以我們的類名（document.getElementsByClassName）爲您的所有輸入文件中的字段，jQuery的（不是必要的）

document.getElementsByClassName('fileClassName').addEventListener('change', handleFileSelect, false); 

function handleFileSelect(evt) { 
     var files = evt.target.files; 
     var f = files[0]; 
     var reader = new FileReader(); 

      reader.onload = (function(theFile) { 
       return function(e) { 
        var relativeid= $(this).attr('id').replace("file",""); 
        document.getElementById('display'+relativeid).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="100" />'].join(''); 
       }; 
      })(f); 

      reader.readAsDataURL(f); 
}

來源

2013-09-11 01:17:04 Eez

通過JavaScript循環圖像預覽

回答

相關問題