Question

我正在编写一个jQuery代码来上传图像文件并显示缩略图。我有这个脚本适用于单个文件。

        reader = new FileReader();
        reader.onload = (function (tFile) {
            return function (evt) {
                holder.innerHTML = '<img class="draggable" src="' + event.target.result + '" />';
            };
        }(file));
        reader.readAsDataURL(file);

我修改了此脚本以支持多个图片上传，如下所示。但我只获得src属性中的二进制数据，并且不显示图像。

        reader = new FileReader();
        function readFile(index) {
        if( index >= files.length ) return;

        var file = files[index];
        reader.onload = (function(e) {  
            return function (evt) {
            $("#holder").append('<img class="thumbnail" width="150px" height="150px" "src="' + event.target.result + '" />');

            };

            readFile(index+1)
        }(file));
        reader.readAsDataURL(file);
    }
    readFile(0);

我是FileReader概念的新手。有人可以指出上述代码有什么问题。

提前致谢，

Answer 1

不完全回答你的问题，但不会追随更好的方式来创建和初始化FileReader：

reader = new FileReader();

reader.onload = function(e) {
    $("#holder").append('<img class="thumbnail" width="150px"' 
        + 'height="150px" "src="' + e.target.result + '" />');
};

$.each(files,function(i,file){
    reader.readAsDataURL(file);
});

Musa的希望回答帮助了你。下面的工作，但有点不同的方法。它使用 FileReaderJS 插件。这是 FileReader 的包装，提供易于使用的功能。

您可以指定input和drop zone以及init的设置选项。

var $tgt, options = {
        dragClass: "drag-here",
        accept: "image/*",
        readAsMap: {},
        readAsDefault: 'DataURL',
        on: {
            load: function(e, file) {
                var im = $("<img/>")
                    .attr("src", e.target.result)
                    .addClass('thm-img'),
                    dw = $("<div/>").addClass("col-sm-3"),
                    d = $("<div/>").addClass("thumbnail");
                d.append(im)
                dw.append(d)
                $tgt.append(dw);
            },
            error: function(e, file) {
                $("#log-start").append($("<div/>")
                    .addClass("text-error")
                    .text(e.target.error.code)
                );
            }
        }
    };

$(function() {
    $tgt = $("#holder"); //div where to show previews

    $("#selectFile, div.drag-backdrop").fileReaderJS(options);
});

以下工作正在Plunk展示。

Answer 2

一个简单的方法是加载一个，当它完成时，加载另一个，当一个完成加载另一个等...

    reader = new FileReader();
    function readFile(index) {
        if( index >= files.length ) return;

        var file = files[index];
        reader.onload = function (evt) {
            $("#holder").append('<img class="thumbnail" width="150px" height="150px" "src="' + evt.target.result + '" />');
            readFile(index+1);
        };

        reader.readAsDataURL(file);
    }
    readFile(0);

jquery filereader：获取二进制数据而不是数据URL

2 个答案: