//javascript
var img_prev=document.querySelectorAll('.img_prev_save');
img_previewer(img_prev);
function img_previewer(elem){
if(!document.querySelector('.img_preview'))
{
var new_div=document.createElement('DIV');
new_div.setAttribute('class','img_preview');
var new_img=document.createElement('IMG');
console.log(elem);
for(var i=0;i<elem.length;i++){
var select=elem[i];
if(select.value!=null ||select.value!='')
{
var img_link=select.value;
var img_arr=img_link.split(',');
//console.log(img_arr);
for(var j=0;j<img_arr.length;j++){
new_img.src='filemanager/'+img_arr[j];
new_div.appendChild(new_img);
elem[i].parentNode.insertBefore(new_div,elem[i]);
}
}
}
}
//elements with .img_prev_save
<input type="hidden" class="img_prev_save" id="feat_img" name="feat_img" value="uploads/1436093205.jpg">
<input type="hidden" class="img_prev_save" id="gall_imgs" name="gall_imgs" value="uploads/fireworks.png,uploads/1435455457.jpg">
脚本循环显示正在处理的每个值。但实际输出只是最后一张图片“uploads/1435455457.jpg”。我似乎找不到我做错了什么。帮助我!!!
最佳答案
检查此代码。您正在重写您的 new_img.src。那是因为 createElement('IMG') 创建了一个 img object :
Create an Image Object: You can create an element by using the document.createElement() method [1]
for(var i=0;i<elem.length;i++){
var select=elem[i];
var img_link=select.value;
var img_arr=img_link.split(',');
for(var j=0;j<img_arr.length;j++){
var new_img=document.createElement('IMG');
new_img.src=img_arr[j];
new_img.width = 100;
new_div.appendChild(new_img);
elem[i].parentNode.insertBefore(new_div,elem[i]);
}
}
地址:http://plnkr.co/edit/2B0V2z1q58MnlGgvRSZd
//javascript
var img_prev=document.querySelectorAll('.img_prev_save');
img_previewer(img_prev);
function img_previewer(elem){
if(!document.querySelector('.img_preview'))
{
var new_div=document.createElement('DIV');
new_div.setAttribute('class','img_preview');
for(var i=0;i<elem.length;i++){
var select=elem[i];
var img_link=select.value;
var img_arr=img_link.split(',');
for(var j=0;j<img_arr.length;j++){
var new_img=document.createElement('IMG');
new_img.src=img_arr[j];
new_img.width = 100;
new_div.appendChild(new_img);
elem[i].parentNode.insertBefore(new_div,elem[i]);
}
}
}
}
Plunker: http://plnkr.co/edit/2B0V2z1q58MnlGgvRSZd<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="hidden" class="img_prev_save" id="feat_img" name="feat_img" value="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Tetris_Z.svg/500px-Tetris_Z.svg.png" />
<input type="hidden" class="img_prev_save" id="gall_imgs" name="gall_imgs" value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Tetris_S.svg/1280px-Tetris_S.svg.png,https://upload.wikimedia.org/wikipedia/commons/9/91/Tetris_T.svg" />
</body></html>关于javascript - 图像加载仅加载最后一张图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31252854/