在HTML表單上預覽不同的圖像

Question

我有一個帶有多個輸入的HTML表單，用於上傳圖片。我需要預覽每個這些照片後，我單擊選擇文件按鈕：

$(function() { 
 
    $("#img1").change(function() { 
 
    if (this.files && this.files[0]) { 
 
     var reader = new FileReader(); 
 
     reader.onload = imageIsLoaded; 
 
     reader.readAsDataURL(this.files[0]); 
 
    } 
 
    }); 
 
}); 
 

 
function imageIsLoaded(e) { 
 
    $('#myImg1').attr('src', e.target.result); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> <input id="img1" name="img1" type="file" /> </td> 
 
    <td> <img id="myImg1" src="#" alt="your image" /> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> <input id="img2" name="img2" type="file" /> </td> 
 
    <td> <img id="myImg2" src="#" alt="your image" /> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> <input id="img3" name="img3" type="file" /> </td> 
 
    <td> <img id="myImg3" src="#" alt="your image" /> </td> 
 
    </tr> 
 
</table>

提前感謝！

Answer 1

要達到此目的，您可以在所有文件輸入和img元素上放置公共類。從那裏您可以使用DOM遍歷來查找與輸入相關的img，並在選擇文件時更新它的src屬性。試試這個：

$(function() { 
 
    $('.img').change(function() { 
 
    if (this.files && this.files[0]) { 
 
     var $view = $(this).closest('tr').find('.view'); 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
     $view.attr('src', e.target.result); 
 
     } 
 
     reader.readAsDataURL(this.files[0]); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><input id="img1" name="img1" type="file" class="img" /> </td> 
 
    <td><img id="myImg1" src="#" alt="your image" class="view" /> </td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="img2" name="img2" type="file" class="img" /> </td> 
 
    <td><img id="myImg2" src="#" alt="your image" class="view" /> </td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="img3" name="img3" type="file" class="img" /> </td> 
 
    <td><img id="myImg3" src="#" alt="your image" class="view" /> </td> 
 
    </tr> 
 
</table>