我目前正在处理 html5 API 图像上传,但我对涉及的一些 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'更改为$i, $i++
用于php循环的东西?假设图像框的数量存储为 php 变量$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);
}
}