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