通过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循环图像预览

回答

相关问题