2 图像输入 - 显示两个图像 - 小提琴答案

【问题标题】：2 Image Inputs - Display both images - Fiddl2 图像输入 - 显示两个图像 - 小提琴
【发布时间】：2014-10-17 18:23:05
【问题描述】：

首先：NICE COMMUNITY，这几天我学到了很多东西。

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#full-sized-img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

我有 2 张图片，您可以通过单击它们并选择一张自己的图片来替换它们。

第一个工作，你点击它然后窗口打开选择一个新的，但是第二个输入不起作用..

有人有想法吗？ :)

【问题讨论】：

标签： jquery html image input replace

【解决方案1】：

花点时间把这个小提琴和你的比较一下，有几个缺失的处理程序和错误的选择器，现在可以正常工作了

http://jsfiddle.net/InferOn/drwm84ce/8/

HTML

<form id="form1" runat="server">
    <input type='file' id="imgInp" name="images[]" class="uploads" size="chars" />
    <div id="full-sized-image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/3/3d/My_personal_black_cat.gif" alt="Audi" id="full-sized-img" />
    </div>
    <input type='file' id="imgInp2" name="images[]" class="uploads" size="chars" />
    <div id="overlay_image">
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Farm-Fresh_cat.png" alt="Audi advert" id="overlay_img" />
    </div>
</form>

$('#full-sized-image').click(function () {
    $('#imgInp').click();
});
$('#overlay_image').click(function () {
    $('#imgInp2').click();
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#full-sized-img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function readURL2(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#overlay_img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});
$("#imgInp2").change(function () {
    readURL2(this);
});

【讨论】：