具有多個輸入文件的多個圖像預覽

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

我努力理解代碼，但我可以得到你有多個文件，並且你希望在文件上傳時向用戶顯示預覽。

方法是正確的，但有一些基本的錯誤，你使用相同的ID為img和輸入類型file ，這將有用，而且我可能會有更多的錯誤。 為了幫助您解決問題，我修改了您的代碼，它將顯示不同圖像的預覽。

HTML

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

使用Javascript

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

            reader.onload = function (e) {
                imgId = '#preview-'+$(input).attr('id');
                $(imgId).attr('src', e.target.result);
            }

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


      $("form#mainform input[type='file']").change(function(){
        readURL(this);
      });

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