Question

我想预览使用不同input type file选择的图像。我的小提琴在这里：

现在我一次只能显示1张图像。当我浏览第二个时，图像被覆盖。我必须使用两个输入标签，因为它们不同。

请帮忙！

Answer 1

Change Your Jsp to :   
 <div>
  <input id="asd1" type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
 </div>
<div>
<input id="asd2" type='file' onchange="readURL1(this);" />
 <img id="blahblah" src="#" alt="your image1" />
</div>

将您的JavaScript更改为：

        var img1 =document.getElementById("asd1");
    var img2 = document.getElementById("asd2");
    function readURL(img1) {
        if (img1.files && img1.files[0]) {
            var reader1 = new FileReader();

            reader1.onload = function (e) {
                alert(e.target.result);
                $('#blah').attr('src', e.target.result).width(150).height(200);
            };

            reader1.readAsDataURL(img1.files[0]);
        }
    }

    function readURL1(img2) {
        if (img2.files && img2.files[0]) {
            var reader2 = new FileReader();

            reader2.onload = function (e1) {
                alert(e1.target.result);
                $('#blahblah').attr('src', e1.target.result).width(150).height(200);
            };
            reader2.readAsDataURL(img2.files[0]);
        }
    }

您的JavaScript函数具有相同的名称

使用2个不同的文件输入显示图像

1 个答案: