Javascript 将多个图像上载到不同的div

我有两个按钮，我想都上传两个不同的文件，并显示在两个不同的div内。我的代码适用于1个图像。如何修改代码以处理2个图像？谢谢

我现在的代码是：

HTML:

浏览1
浏览2
销售
40%

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>

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#myimage'）.css（'background'，'transparent url（'+e.target.result+'））左上角不重复'）；
}
reader.readAsDataURL（input.files[0]）；
}
}

向每个

输入添加
数据预览=“预览div\u id”
。然后在
onload
函数中，您应该将
$（'#myimage'）
替换为
$（'#'+$（输入）.data（“预览”）

像这样：

<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>


浏览1
浏览2
销售
40%

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#'+$（输入）.data（“预览”））.css（'background'，'transparent url（'+e.target.result+'））左上角不重复'）；
}
reader.readAsDataURL（input.files[0]）；
}
}
将一个属性multiple添加到您的输入type=“file”中，它应该是这样的，然后在jquery中创建一个输入更改事件$（'input'）.change（function（）{并循环使用this.files.length谢谢Diego！它工作得非常好。非常感谢。
<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>