将多个图像上传到不同的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>