Jquery Problem.For More 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は、jqueryのはここにある。ここ

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

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

です。

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/