Question

如何预览从不同输入上传的多张图片？来自textarea的内容在按下按钮时写入div seeimg ，textarea包含<img src="$img" id="img1">，id为1到15（img1，img2，img3 ... img15）我想要用户上传的图片可在div seeimg

中查看

HTML

<form method="post" enctype="multipart/form-data" id="mainform">
Imagine 1:<br>
 <input type="file" name="img1" id="img1"><br>
     <br><br>     
Imagine 2 :<br>
 <input type="file" name="img2" id="img2"><br>
     <br>
 Imagine 3 :<br>
 <input type="file" name="img3" id="img3"><br>
     <br>
 Imagine 4 :<br>
 <input type="file" name="img4" id="img4"><br>
     <br>
 Imagine 5 :<br>
 <input type="file" name="img5" id="img5"><br>
     <br>
 Imagine 6 :<br>
 <input type="file" name="img6" id="img6"><br>
     <br>
 Imagine 7 :<br>
 <input type="file" name="img7" id="img7"><br>
     <br>
 Imagine 8 :<br>
 <input type="file" name="img8" id="img8"><br>
     <br>
 Imagine 9 :<br>
 <input type="file" name="img9" id="img9"><br>
     <br>
 Imagine 10 :<br>
 <input type="file" name="img10" id="img10"><br>
     <br>
 Imagine 11 :<br>
 <input type="file" name="img11" id="img11"><br>
     <br>
 Imagine 12 :<br>
 <input type="file" name="img12" id="img12"><br>
     <br>
 Imagine 13 :<br>
 <input type="file" name="img13" id="img13"><br>
     <br>
 Imagine 14 :<br>
 <input type="file" name="img14" id="img14"><br>
     <br>
 Imagine 15 :<br>
 <textarea id="insert" name="content"></textarea>
 <input type="file" name="img15" id="img15"><br>
 </form>
 <div id="seeimg">
 </div>

到目前为止，脚本只显示在第一个输入文件<input type="file" name="img1" id="img1">上传的图像，如果我不断更改第一个输入的图像，则会更改下一个而不是第一个输入。
Jquery

   function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(e.target.result+" , "+i);
            $('#seeimg #img'+i).attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}


$("form#mainform #img"+i).change(function(){
    readURL(this);
    i++;
});

TL; DR它正在为第一个文件输入工作的脚本，如果我上传另一个图像，它会不断更改其他img src。

小提琴： https://jsfiddle.net/eLss3ojx/6/

Answer 1

我努力了解代码，但我可以得到您有多个文件，并且您希望在文件上传时向用户显示预览。

这种方法是正确的，但是存在某些基本错误，您使用的是listB = [i for i in xrange(1,1000000)] start = clock() listA = [1,2] newList = [listA[0] if i%2 == 1 else listA[1] for i in listB] print "Time taken = %.5f" % (clock() - start) >> 0.15658和输入类型img的相同ID，这将会解决，而且我可能会遇到更多错误。为了帮助您结束，我修改了您的代码，它将显示不同图像的预览。

HTML

file

<强>的Javascript

    <form method="post" enctype="multipart/form-data" id="mainform">
    Imagine 1:<br>
     <input type="file" name="img1" id="img1"><br>
     <img id="preview-img1" />
         <br><br>     
    Imagine 2 :<br>
     <input type="file" name="img2" id="img2"><br>
     <img id="preview-img2" />
         <br>
     Imagine 3 :<br>
     <input type="file" name="img3" id="img3"><br>
     <img id="preview-img3" /> 
         <br>
     Imagine 4 :<br>
     <input type="file" name="img4" id="img4"><br>
     <img id="preview-img4" />     
         <br>
     Imagine 5 :<br>
     <input type="file" name="img5" id="img5"><br>
     <img id="preview-img5" />     
         <br>
     Imagine 6 :<br>
     <input type="file" name="img6" id="img6"><br>
     <img id="preview-img6" />     
         <br>
     Imagine 7 :<br>
     <input type="file" name="img7" id="img7"><br>
     <img id="preview-img7" />     
         <br>
     Imagine 8 :<br>
     <input type="file" name="img8" id="img8"><br>
     <img id="preview-img8" />     
         <br>
     Imagine 9 :<br>
     <input type="file" name="img9" id="img9"><br>
     <img id="preview-img9" />     
         <br>
     Imagine 10 :<br>
     <input type="file" name="img10" id="img10"><br>
     <img id="preview-img10" />     
         <br>
     Imagine 11 :<br>
     <input type="file" name="img11" id="img11"><br>
     <img id="preview-img11" />     
         <br>
     Imagine 12 :<br>
     <input type="file" name="img12" id="img12"><br>
     <img id="preview-img12" />     
         <br>
     Imagine 13 :<br>
     <input type="file" name="img13" id="img13"><br>
     <img id="preview-img13" />     
         <br>
     Imagine 14 :<br>
     <input type="file" name="img14" id="img14"><br>
     <img id="preview-img14" />     
         <br>
     Imagine 15 :<br>
     <textarea id="insert" name="content"></textarea>
     <input type="file" name="img15" id="img15"><br>
      <img id="preview-img15" />    
     </form>

Answer 2

在你的JSfiddle中，你将src设置为不是图像，而是设置为div。你必须创建一个图像元素并将其附加到你的div：

$('<img>').attr('id', '#pre_img' + i).attr('src', e.target.result).appendTo('#vezi');

而不是

$(principdiv+'#img'+i).attr('src', e.target.result);

此外，您的代码错误地绑定了change处理程序。你应该做这样的事情：

$("#mainform input[id^='img']").change(function() {
  readURL(this);
});

JSFiddle

具有多个输入文件的多个图像预览

2 个答案: