如何循环这个函数？答案

【问题标题】：how to loop this function?如何循环这个函数？
【发布时间】：2013-02-10 06:26:35
【问题描述】：

感谢这里的一些帮助，我有一种方法可以预览选择并上传的图像：

<input type='file' name="files[]" onchange="readURL(this);" multiple />
<div id="previews"></div>

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {
                var container = $('#previews');
                var image = $('<img>').attr('src', e.target.result).width(150);
                image.appendTo(container);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

我想知道如何为输入中选择的每个文件循环这个函数？我只是看不到在哪里使用 .each() 之类的东西

编辑：

我正在尝试这个.. 但它在某个地方错了，因为它显示 2 个预览但都是相同的图像？

function readURL(input) {
    $.each(input.files,function(i) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var container = $('#previews');
            var image = $('<img>').attr('src', e.target.result).width(150);
            image.appendTo(container);
        };
        reader.readAsDataURL(input.files[0]);
    });
}

【问题讨论】：

因为该函数在更改事件上被调用；没有循环。
如果选择了多个图像，您的意思是循环选择的图像，例如input.files[2]等。
您可以阅读更多关于编程中的事件，尤其是在 JS 中：stackoverflow.com/questions/5758363/…
@Vdt - 事件并不真正相关，您可以选择多个图像，并且当更改事件发生时，回调等中有可用的图像列表。
我看到您的编辑，您需要更改最后一行代码 - input.files[i] 而不是 input.files[0]

标签： javascript jquery loops

【解决方案1】：

input.files 是一个FileList，其作用类似于一个数组。
您可以像使用任何其他数组一样在其上使用jQuery.each。

【讨论】：

如果您发现来自 w3c 的定义难以阅读，这里是easier-to undertand-one。

【解决方案2】：

您只需要遍历文件被选中的最后一行。

function readURL(input) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var container = $('#previews');
        var image = $('<img>').attr('src', e.target.result).width(150);
        image.appendTo(container);
    };

    $.each(input.files,function(i) {
        reader.readAsDataURL(input.files[i]);
    });
}

【讨论】：