將多個圖像上傳到不同的div

Question

我有兩個按鈕，我都想上傳兩個不同的文件並在兩個不同的div中顯示它們。 我的代碼適用於1張圖片。 如何修改代碼以能夠處理2張圖像？ 謝謝！

目前，我的代碼是：

HTML：

<div class="span12">
    <span class="btn btn-default btn-file"> Browse 1 <input type="file" onchange="readURL(this);"></span>
            <span class="btn btn-default btn-file"> Browse 2 <input type="file" onchange="readURL(this);"></span>

    <div class="place-image" id="myimage">
    <div class= "place-content" id="myimage2" onkeypress="return (this.innerText.length <= 16)">
            <p contenteditable="true">SALE<br>40%</p>
            </div>  
        </div>

JavaScript：

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

        reader.onload = function (e) {
            $('#myimage').css('background', 'transparent url('+e.target.result +') left top no-repeat');
        }

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

Answer 1

將data-preview="preview_div_id"到每個input 。 然后，在onload函數中，應將$('#myimage')替換$('#myimage') $('#' + $(input).data("preview")) 。

像這樣：

<div class="span12">
    <span class="btn btn-default btn-file"> Browse 1 <input type="file" onchange="readURL(this);" data-preview="myimage"></span>
            <span class="btn btn-default btn-file"> Browse 2 <input type="file" onchange="readURL(this);" data-preview="myimage2"></span>

    <div class="place-image" id="myimage">
    <div class= "place-content" id="myimage2" onkeypress="return (this.innerText.length <= 16)">
            <p contenteditable="true">SALE<br>40%</p>
            </div>  
        </div>


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

        reader.onload = function (e) {
            $('#' + $(input).data("preview")).css('background', 'transparent url('+e.target.result +') left top no-repeat');
        }

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