循环浏览javascript以进行图像预览

时间:2013-09-11 01:06:15

标签: javascript

我目前正在处理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'更改为用于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);
}
}

2 个答案:

答案 0 :(得分:0)

您可以为所有文件输入提供一个类,然后使用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,使用现有的HTML并匹配ID的第一部分:

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

这匹配所有input元素,其类型为“file”,ID以“file”开头。

答案 1 :(得分:0)

你可以让我们的类名(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);
}