HTML文件上傳

Question

我試圖讓文件上傳工作3個不同的div ID（每個都有自己的預覽），我已經接近它的工作，但第一個div取代了其他兩個div的內容。

我不知道我在做什麼錯誤的Javascript（不是很精通js），任何幫助將非常感激！

function readURL(input, target) { 
 
     if (input.files && input.files[0]) { 
 
      var reader = new FileReader(); 
 
      var image_target = $(target); 
 
      reader.onload = function (e) { 
 
       image_target.attr('src', e.target.result).show(); 
 
      }; 
 
      
 
      reader.readAsDataURL(input.files[0]); 
 
     } 
 
    } 
 
    
 
    $("#pic1").live("change",function(){ 
 
     readURL(this, "#preview1"); 
 
    }); 
 
    $("#pic2").live("change",function(){ 
 
     readURL(this, "#preview2"); 
 
    }); 
 
    $("#pic3").live("change",function(){ 
 
     readURL(this, "#preview3"); 
 
    });

.input-file-row-1:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 

 
.input-file-row-1{ 
 
    display: inline; 
 
\t margin-top: 25px; 
 
\t position: relative; 
 
} 
 

 
#preview_image { 
 
    display: inline; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 2px 0px 0px 5px; 
 
    border-radius: 10px; 
 
} 
 

 
.upload-file-container { 
 
\t position: relative; 
 
\t width: 100px; 
 
\t height: 137px; 
 
\t overflow: hidden; \t 
 
\t background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; 
 
\t float: left; 
 
\t margin-left: 23px; 
 
} 
 

 
.upload-file-container-text{ 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 12px; 
 
\t color: #719d2b; 
 
\t line-height: 17px; 
 
\t text-align: center; 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t width: 100px; 
 
\t height: 35px; 
 
} 
 

 
.upload-file-container-text > span{ 
 
\t border-bottom: 1px solid #719d2b; 
 
\t cursor: pointer; 
 
} 
 

 
.one_opacity_0 { 
 
    opacity: 0; 
 
    height: 0; 
 
    width: 1px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="" method="post" action="#" class="feedback-form-1"> 
 
    <fieldset> 
 
     <div class="input-file-row-1"> 
 
\t   <div class="upload-file-container"> 
 
       <img id="preview1" src="#" alt="" /> 
 
\t \t \t  <div class="upload-file-container-text"> 
 
        <div class = 'one_opacity_0'> 
 
         <input type="file" id="pic1" label = "add" /> 
 
        </div> 
 
        <span> Add Photo </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </div> 
 
\t </fieldset> 
 
</form> 
 
<form name="" method="post" action="#" class="feedback-form-1"> 
 
    <fieldset> 
 
     <div class="input-file-row-1"> 
 
\t   <div class="upload-file-container"> 
 
       <img id="preview2" src="#" alt="" /> 
 
\t \t \t  <div class="upload-file-container-text"> 
 
        <div class = 'one_opacity_0'> 
 
         <input type="file" id="pic2" label = "add" /> 
 
        </div> 
 
        <span> Add Photo </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </div> 
 
\t </fieldset> 
 
</form> 
 
<form name="" method="post" action="#" class="feedback-form-1"> 
 
    <fieldset> 
 
     <div class="input-file-row-1"> 
 
\t   <div class="upload-file-container"> 
 
       <img id="preview3" src="#" alt="" /> 
 
\t \t \t  <div class="upload-file-container-text"> 
 
        <div class = 'one_opacity_0'> 
 
         <input type="file" id="pic3" label = "add" /> 
 
        </div> 
 
        <span> Add Photo </span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     </div> 
 
\t </fieldset> 
 
</form>

Answer 1

「活」 方法已被棄用，而不是改變的代碼：

$("#pic1").on("change",function(){ 
    readURL(this, "#preview1"); 
}); 
$("#pic2").on("change",function(){ 
    readURL(this, "#preview2"); 
}); 
$("#pic3").on("change",function(){ 
    readURL(this, "#preview3"); 
});