javascript - Fine-Uploader 上传前预览图像 - FileReader

Question

此问题与 Widen Fine-Uploader ( https://github.com/Widen/fine-uploader ) 相关

我想在上传开始之前显示图像预览。没有自动上传。多文件选择器 - 没有单个文件输入元素。

.on('submitted', function(event, id, filename) {
    $('<img id="pprev'+id+'" src="#" />').appendTo("#previewupload"+id);
    readURL(this,id);     // WHAT DO I NEED TO USE FOR THIS ?
}

...
manualuploader.fineUploader('uploadStoredFiles');

和

function readURL(input, previewID) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#pprev'+previewID)
            .css("border","10px solid #FF0000")
            .attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

在 readURL() 初始化中我需要使用什么参数？

Answer 1

您需要将表示图像的任何 File 对象传递到您的 readURL 方法中。

因此，首先，将 readURL 函数的最后一行更改为 reader.readAsDataURL(file)。另外，为了便于阅读，将第一个参数从 input 更改为 file。

您可以通过getFile API方法获取特定Fine Uploader文件ID的File对象。您可以在 subscribed 回调中检索 File，如下所示:

$(this).fineUploader('getFile', id);

然后，正如我所说，在进行建议的修改后，将此调用的结果(File)传递到您的 readURL 方法中。

请注意，对显示上传前预览的 native 支持是 scheduled feature ，但是，正如您所看到的，由于 Fine Uploader 的 API，目前这并不是很难做到。另请注意，getFile API 方法在非文件 API 浏览器(例如 IE9 及更早版本)中不起作用。