4

ユーザーが画像をアップロードできるように、 pluploadを使用しています。しかし、最終的に保持することを決定する前に、プレビュー用のサムネイルも生成したいと考えています。現在、plupload には「画像プレビュー」機能が存在しないことを理解しています。そこで、これを回避するために、追加された画像ごとに 1 つのファイルのみを含む新しいフォームを送信し、サーバーにそれを処理させてサムネイルを返すことにしました。

ここで私の質問は、「入力」ファイル フィールドを動的に作成できるように、plupload からファイル オブジェクトのハンドルを取得する方法です。

現在、uploader.files と set input.name を反復処理していますが、追加されたファイルの完全なファイル パスを取得できないように見えるため、input.value フィールドの設定方法がわかりません。

(このアプローチを完全に置き換えることに加えて) どんな提案もお待ちしています。アップロード用に選択されたファイルのサムネイルが必要なだけです。

4

1 に答える 1

3

私の答えは少し遅れているかもしれませんが、今日同様の解決策を探して、次のアプローチを思いつきました。HTML5 ランタイムでのみ機能します。

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 に答える