Question

//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">

脚本循环显示正在处理的每个值。但实际输出只是最后一张图片＆＃39; uploads / 1435455457.jpg＆＃39;。我似乎无法找到我做错的事。帮帮我!!!

Answer 1

检查此代码。您正在重写new_img.src。那是因为createElement('IMG')创建了一个img 对象：

创建图片对象：您可以使用document.createElement（）创建元素方法[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]);
        }
    }

Plnkr：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>

[1] http://www.w3schools.com/jsref/dom_obj_image.asp

Answer 2

假设您只是尝试将三个图像附加到div，问题是您只创建一个新图像，而不是为输入中的每个值创建图像。只需将第var new_img=document.createElement('IMG');行移到第二个嵌套for循环的顶部即可。

这是一个小提琴，例如。 https://jsfiddle.net/7xxo0u6f/

Answer 3

您正在使用不同的来源覆盖相同的图像。更好地创建3个不同的图像并附加在div中。就像@rgbchris建议的那样。

图片加载仅加载上一张图片

3 个答案: