Question

此问题与Widen Fine-Uploader（https://github.com/Widen/fine-uploader）

有关

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

.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。

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

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

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

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

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

1 个答案: