Question

在同一页面中的多个项目上调用上载脚本之前的jQuery图像预览不起作用。我更改了脚本上的id，以便它可以应用于相应的图像，但它不能按预期工作。

我做了一个JSFiddle：
http://jsfiddle.net/LvsYc/6977/

代码：

<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image1" />
</form>

<form id="form2">
    <input type='file' id="imgInp2" />
    <img id="blah2" src="#" alt="your image2" />
</form>

jQuery的：

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

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

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

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

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

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

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

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

Answer 1

您需要做的就是将第二个函数readURL更改为另一个名称readURL2 解决小提琴here

它对我有用。

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

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

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

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

祝你好运

上传脚本之前的jQuery图像预览

1 个答案: