将多张图片上传到不同的 div答案

【问题标题】：upload multiple images into different divs将多张图片上传到不同的 div
【发布时间】：2015-09-26 22:23:39
【问题描述】：

我有两个按钮，我希望它们都上传两个不同的文件并将它们显示在两个不同的 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>

【问题讨论】：

将属性 multiple 添加到您的输入类型 ="file" 它应该看起来像然后在jquery 创建一个输入更改事件 $('input').change(function() { 并循环通过 this.files.length

标签： javascript jquery html css file-upload

【解决方案1】：

将data-preview="preview_div_id" 添加到每个input。然后在onload 函数中，您应该将$('#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>

【讨论】：

谢谢迭戈！它完美地工作。真的很感激。