Question

Iam使用Jquery动态分配Image Src。

这是我的HTML代码：

 <img src="" id="picNameId" class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;">
 <input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

这是我的Jquery代码：

 var ticketFileAttahmentName=$("#ticketFileAttahmentName").val();
 if(ticketFileAttahmentName!='')
     {

       var ticketFileAttahmentName1=ticketFileAttahmentName.split("|");
       for(i=0;i<ticketFileAttahmentName1.length;i++)
           {
              if(ticketFileAttahmentName1.length>1)
                 {
                    var file = ticketFileAttahmentName1[i];
                    var src="/xxxxxx/files/"+file;
                    document.getElementById("picNameId").src = src;
                    $("#picNameId").src = src; 
                    $("#picNameId").show(); 
                 }else{
                   var src="/xxxxxx/files/"+ticketFileAttahmentName;
                   document.getElementById("picNameId").src = src;
                   $(".picNameId").src = src; 
                   $(".picNameId").show(); 
                }
           }
     }

我在console.log

中获取所有文件名

但我无法为同一输入设置显示多个文件。

单个文件iam能够显示。

Answer 1

解决这个问题的快捷方法是这样的：

HTML：

<div id="picHolder></div>
<input type="hidden" name="ticketFileAttahmentName" id="ticketFileAttahmentName" value=""> <br>

的Javascript / jQuery的：

var ticketFileAttahmentName=$("#ticketFileAttahmentName").val();
 if(ticketFileAttahmentName!='')
     {

       var ticketFileAttahmentName1=ticketFileAttahmentName.split("|");
       $('#picHolder').empty();
       for(i=0;i<ticketFileAttahmentName1.length;i++)
           {
               var file = ticketFileAttahmentName1[i];
               var src="/xxxxxx/files/"+file;
               var pic = $('<img class="picNameId" name="picNameId" style="height: 100px; width: 100px; display: none;">');
               pic.attr('src', src); 
               $('#picHolder').append(pic);
           }
     }

Answer 2

您无法在一个图片标签中制作多张图片。但是，您可以为每个图像创建新的img标记。尝试运行以下代码段：

＆＃13;

var ticketFileAttachmentName = document.getElementById(
  "ticketFileAttachmentName"
).value;

var ticketFileAttachmentName1 = ticketFileAttachmentName.split("|");

for (i = 0; i < ticketFileAttachmentName1.length; i++) {
  var elem = document.createElement("img");
  elem.src = "https://placebear.com/100/" + ticketFileAttachmentName1[i];
  document.getElementById("pictures").appendChild(elem);
}

＆＃13;

img {
  width: 100px;
  height: 100px;
}

＆＃13;

<div id="pictures"></div>
<input type="hidden" name="ticketFileAttachmentName" id="ticketFileAttachmentName" value="100|101|102|103|104|105|106|107|108|109|110|111">

＆＃13;

我删除了底层条件语句，因为我不知道它会在这里做什么。

Answer 3

wront使用你需要更换
$(".picNameId").src = src;

到

$("#picNameId").attr("src",src)

更多访问 Changing the image source using jQuery

http://api.jquery.com/attr/

也许你真正的问题尝试基于Css的src设置 https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

例如，一个img和3个resurces。

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

Answer 4

$("#imgInp").change(function() {


    if ($(this).prop('files')[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('.blah').last().attr('src', e.target.result);
        }

        reader.readAsDataURL($(this).prop('files')[0]); // convert to base64 string
    }

});

如何在Jquery中传递多个Image Src

4 个答案: