使用 FileReader 选择和显示图像 [英] Select and display image(s) using FileReader

问题描述

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

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:

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

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

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

我想做什么:

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

推荐答案

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

You have duplicate ids all over (imgInp and 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);

那就试试吧:

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);
    });
});

小提琴

这篇关于使用 FileReader 选择和显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！