Jquery Problem.For More that 1圖片上傳預覽

Question

我有一個問題。我想在上傳前查看我選擇的圖像的預覽。 我的代碼適用於僅1張圖片上傳。當我讓4個地方上傳照片。 4不同的4張照片，然後這不工作。我試圖更改每個上傳的ID，類。但失敗。

我的代碼是在這裏.. HTML

<div class="input-sec"> 

        <label class="p-label" for="rear"><span style="font-size:15px;font-weight:bold;">Rear</span><br> 
        <img id="output" src="images/upload_placeholder.jpg" class="pre_img"> 

        </label> 

        <input type="file" id="rear" name="rear" value="" onchange="loadFile(event)" style="color:white;"> 


        </div> 

CSS是這裏

.input-sec > input[type="file"] 
{ 
    display: none; 
} 

.input-sec img 
{ 
    height: 200px; 
    cursor: pointer; 
} 

jQuery是這裏。

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

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

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

    $("#front").change(function(){ 
     readURL(this); 
    }); 

我的問題是當我在頁面上只添加1張照片上傳域，它的工作原理。但是，當我嘗試添加超過1個圖像上傳字段相同，然後沒有人work.I也嘗試更改其每個上傳和JQuery的ID。但失敗了。請幫幫我。

Answer 1

我得到它固定。

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

       reader.onload = function (e) { 
        $('#file11') 
         .attr('src', e.target.result) 
         .width(200) 
         .height(200); 
       }; 

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

       reader.onload = function (e) { 
        $('#file21') 
         .attr('src', e.target.result) 
         .width(200) 
         .height(200); 
       }; 

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

       reader.onload = function (e) { 
        $('#file31') 
         .attr('src', e.target.result) 
         .width(200) 
         .height(200); 
       }; 

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

       reader.onload = function (e) { 
        $('#file41') 
         .attr('src', e.target.result) 
         .width(200) 
         .height(200); 
       }; 

       reader.readAsDataURL(input.files[0]); 
      } 
     }  
</script> 

這個HTML是這裏..

<div class="input-sec"> 

        <label class="p-label" for="file1"><span style="font-size:15px;font-weight:bold;">Front</span><br> 
        <img id="file11" src="images/upload_placeholder.jpg" class="pre_img"> 

        </label> 

        <input type="file" id="file1" name="file1" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL(this);" style="color:white;"> 


        </div> 

        <div class="input-sec"> 

        <label class="p-label" for="file2"><span style="font-size:15px;font-weight:bold;">Rear</span><br> 
        <img id="file21" src="images/upload_placeholder.jpg" class="pre_img"> 

        </label> 

        <input type="file" id="file2" name="file2" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL1(this);" style="color:white;"> 


        </div> 



        </div> 

        <div class="r-parent"> 

        <div class="input-sec"> 

        <label class="p-label" for="file3"><span style="font-size:15px;font-weight:bold;">Driver Side</span><br> 
        <img id="file31" src="images/upload_placeholder.jpg" class="pre_img"> 

        </label> 

        <input type="file" id="file3" name="file3" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL2(this);" style="color:white;"> 


        </div> 

        <div class="input-sec"> 

        <label class="p-label" for="file4"><span style="font-size:15px;font-weight:bold;">Customer Side</span><br> 
        <img id="file41" src="images/upload_placeholder.jpg" class="pre_img"> 

        </label> 

        <input type="file" id="file4" name="file4" value="" accept="image/x-png, image/gif, image/jpeg" required onchange="readURL3(this);" style="color:white;"> 


        </div> 

固定它。

Answer 2

將id更改爲frontpre1，frontpre2，frontpre3，frontpre4和front1，front2，front3，front4並創建4個不同的函數來調用。 你也可以去

http://codepedia.info/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/