4

我正在使用plupload让用户上传图片。但我也想在他们最终决定保留之前生成缩略图以供预览。我了解目前 plupload 中不存在“图像预览”功能。因此，为了解决这个问题，我决定提交一个新表单，其中每个添加的图像只包含一个文件，并让服务器处理它并返回一个缩略图。

现在我的问题是如何从 plupload 中获取文件对象的句柄，以便动态创建“输入”文件字段。

目前，我遍历了 uploader.files 并设置了 input.name，但我不知道如何设置 input.value 字段，因为我似乎无法获得添加的文件的完整文件路径。

我愿意接受任何建议（除了完全替换这种方法），我只需要选择要上传的文件的缩略图。

4

1 回答 1

3

也许我的回答有点晚了，但我今天搜索了一个类似的解决方案并想出了以下方法。它只适用于 HTML5 Runtime。

由于无法从 plupload 中获取文件对象，因此我更改了动态创建的输入字段的 onchange 事件并为自己存储文件对象。这是通过绑定到 PostInit-Event 来完成的。

之后，我可以使用 HTML 5 引入的 FileReader API 向用户显示图像。因此无需将图像发送到服务器。请参阅下面的 FilesAdded 侦听器。

    // Currently added File Objects                
    var nativeFiles = {};

    var uploader = new plupload.Uploader({
        runtimes : 'html5,html4',
        // Your settings...
    });

    uploader.bind('PostInit', function(up, params) {
        // Initialize Preview.
        if(uploader.runtime == "html5") {
            var inputFile = document.getElementById(uploader.id + '_html5');
            var oldFunction = inputFile.onchange;

            inputFile.onchange = function() {
                nativeFiles = this.files;
                oldFunction.call(inputFile);
            }
        }
    });


    uploader.bind('FilesAdded', function(up, files) {       
        for (var i in files) {
            // Your code...

            // Load Preview
            if(uploader.runtime == "html5") {
                var fileObject = uploader.getFile(files[i].id);
                var reader = new FileReader();

                reader.onload = (function(file, id) {
                    return function(e) {
                        var span = document.getElementById('thumb_'+id);
                        span.innerHTML = "<img src='"+e.target.result+"'/>";
                      };
                })(nativeFiles[i], files[i].id);

                reader.readAsDataURL(nativeFiles[i]);
            }
        }

    });
于 2011-08-01T18:28:07.510 回答