13

这是我的问题,我有这个小代码来显示我正在上传 LIVE 而不重新加载的 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>

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

我正在尝试做的事情:

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

3 回答 3

13

imgInp您在 (和)上都有重复的 id blah,因此选择器将只选择第一个,最终您的事件仅绑定到第一个输入字段和选择的$('#blah')。您需要选择相对于输入的相对图像。您也不必复制脚本。选择与输入相关的下一个图像标签,例如$(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);
    });
});

小提琴

于 2013-09-21T16:22:30.273 回答
2

好的,您尝试使用点符号将类添加到函数参数这一事实表明,您需要了解更多关于 Javascript 工作原理的信息,而不是简单的 StackOverflow 答案中的解释,但让我尝试一下:

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

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

$(".joint").change(function(){
    readURL(this);
});
  • 但是,假设您有多个.joint元素,您的readURL函数将不再正常工作,因为它目前设计为仅更改src. #blah您需要做的是更改src每个元素对应的img.

所以,如果你有一些这样的 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" />

您可以将您的函数放在所有元素之后,并按如下方式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);
});
于 2013-09-21T16:32:52.623 回答
1

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

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

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

更新

如果您希望它按照您期望的方式工作,您需要使用类,而不是 id。

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

于 2013-09-21T16:18:05.733 回答