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')替换为$('#' + $(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>

将多个图像上传到不同的div

1 个答案: