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

Loop through javascript for image previews

本文关键字：图像 浏览 javascript 循环      更新时间：2023-09-26

我目前正在处理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 变量$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);
}
}

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

您可以为所有文件输入提供一个类，然后使用 document.getElementsByClassName 和 for 循环。（请注意，要在IE 8中工作 - 您可能需要一个垫片，尽管您可能已经通过使用addEventListener放弃了IE8。请参阅 javascript document.getElementsByClassName 与 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);

这将匹配所有具有"file"类型和以"file"开头的 ID 的 input 元素。

相关文章：