Question

首先：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张图片，您可以点击它们并选择自己的图片来替换。

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

有人有想法吗？：）

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

<强> JS

$('#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);
});

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

1 个答案: