一個以上的圖像預覽jQuery函數之前上傳

Question

我使用一個以上的<input type="file">標籤在我與同班=「INPUTFILE」頁面如下圖所示

<div class="col-md-3"> 
    <form id="form2" runat="server"> 
    <input type='file' class="inputFile" /> 
    <img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /> 
    </form> 
</div> 
<div class="col-md-3"> 
    <form id="form3" runat="server"> 
    <input type='file' class="inputFile" /> 
    <img class="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /> 
    </form> 
</div> 

我想展示的預覽圖像，當我選擇一個圖像，並且我正在使用jQuery函數。

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     $('.image_upload_preview').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
    } 
    $(".inputFile").change(function() { 
    readURL(this); 
    }); 

此代碼工作正常，但是當我選擇圖像的第一個標籤，它可自行選擇如下兩個字段相同的圖像：

哪有我解決這個？

Answer 1

您只需修改您的readURL函數即可遍歷DOM，找到與當前input相關的.image_upload_preview元素。試試這個：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $(input).next('.image_upload_preview').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

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

請注意使用$(input).next('.image_upload_preview')。

Answer 2

你需要的目標相關聯的預覽圖像標記，如下所示：

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     var upload_preview = $(input).closest("form").find(".image_upload_preview"); 
     reader.onload = function(e) { 
      upload_preview.attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 
    $(".inputFile").change(function() { 
    readURL(this); 
    });