jQuery 使用 FileReader 选择和显示图像

Select and display image(s) using FileReader

提问by user2784722

Here is my problem, i have this little code to display img that i'm uploading LIVE without reload, but it works only with one img because readURL(input)doesn't have a class and works directly from noname-input, and when i'm adding a class readURL(input.joint), it drops error! Here is my code:

这是我的问题，我有这个小代码来显示我正在上传而无需重新加载的 img，但它只能与一个 img 一起使用，因为readURL(input)它没有类并且直接从 noname-input 工作，并且当我添加时一个类readURL(input.joint)，它会丢弃错误！这是我的代码：

    <input class="joint" type='file' id="imgInp" />
    <img style="width:45px" id="blah" src="#" alt="your image" />


<script type="text/javascript">
function readURL(input) {

    if (input.filers && 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);
});
</script>

I need to add some id or class to this jquery function to make it unique to every input.

我需要向这个 jquery 函数添加一些 id 或类，以使其对每个输入都是唯一的。

What i'm trying to do:

我正在尝试做的事情：

<input class="joint" type='file' id="imgInp" />
        <img style="width:45px" id="blah" src="#" alt="your image" />


    <script type="text/javascript">
    function readURL(input.joint) {

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

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });
    </script>


<input class="file2" type='file' id="imgInp" />
        <img style="width:45px" id="blah" src="#" alt="your image" />


    <script type="text/javascript">
    function readURL(input.file2) {

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

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

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

    $("#imgInp").change(function(){
        readURL(this);
    });
    </script>

采纳答案by PSL

You have duplicate ids all over (imgInpand blah), so the selector will select only the first one, eventually your event is bound only to the first input field and the selection of $('#blah')as well. You need to select the relative image with respect to the input. You dont have to duplicate the script as well. Select the next image tag relative to the input like $(input).next('img').attr('src', e.target.result);

您在 (imgInp和blah) 上都有重复的 id ，因此选择器将只选择第一个，最终您的事件仅绑定到第一个输入字段和选择$('#blah')。您需要选择相对于输入的相对图像。您也不必复制脚本。选择相对于输入的下一个图像标签，如$(input).next('img').attr('src', e.target.result);

So try:

所以尝试：

function readURL(input) {

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

        reader.onload = function (e) {
            $(input).next('img').attr('src', e.target.result);
        }

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


$(function(){   
    $(".upld").change(function () { //set up a common class
        readURL(this);
    });
});

Fiddle

小提琴

回答by mVChr

Ok, the fact that you are trying to add a class to a function argument with dot notation illustrates that you need to learn more about how Javascript works than can be explained in a simple StackOverflow answer, but let me try:

好的，您尝试将一个类添加到带有点符号的函数参数这一事实说明您需要了解更多关于 Javascript 工作原理的知识，而不是简单的 StackOverflow 答案中可以解释的，但让我尝试：

• inputin readURL(input)is an argument name, similar to a variable name, so you cannot extend it in any way. It is a reference to whatever you pass in when you call readURL, in this case, if you look at the end of your code, it is a reference to this. thisrefers to the elements referenced by the jQuery selector you passed in: "#imgInp".

• inputinreadURL(input)是一个参数名，类似于一个变量名，所以你不能以任何方式扩展它。它是对调用时传入的任何内容的引用readURL，在这种情况下，如果您查看代码的末尾，它是对 的引用this。 this指的是您传入的 jQuery 选择器所引用的元素："#imgInp"。

So, if you want to use the .jointclass instead, just pass that in as a jQuery selector:

因此，如果您想改用.joint该类，只需将其作为 jQuery 选择器传入：

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

• However, assuming you have multiple .jointelements, your readURLfunction will no longer work correctly because it is currently designed to only change the srcof #blah. What you need to do is change the srcof each elements corresponding img.

• 但是，假设你有多个.joint元素，你的readURL功能将不再正常工作，因为它是目前设计为仅改变src的#blah。您需要做的是更改src每个元素对应的img.

So, if you had some HTML like this:

所以，如果你有一些这样的 HTML：

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

<input class="joint" type='file' />
<img class="joint-img" style="width:45px" src="#" alt="your image" />

You could place your your readURLfunction after all the elements and alter the reader.onloadsection as follows:

您可以将您的readURL函数放在所有元素之后，reader.onload并按如下方式更改该部分：

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

        reader.onload = function (e) {
            $(input).next('.joint-img').attr('src', e.target.result);
        }

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

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

回答by Jivings

Your code works correctly for me when I fix the typo:

当我修复错字时，您的代码对我来说可以正常工作：

if (input.filers && input.files[0]) {
          ^^^^^^
if (input.files && input.files[0]) {

Here is the example: http://jsfiddle.net/s6ttw/

这是示例：http: //jsfiddle.net/s6ttw/

Update:

更新：

If you want it to work how you expect you need to use classes, rather than ids.

如果您希望它以您期望的方式工作，则需要使用类，而不是 id。

Here's a better example of what you're asking for: http://jsfiddle.net/s6ttw/1/

这是您要求的更好示例：http: //jsfiddle.net/s6ttw/1/