jQueryプラグインの「jQuery File Upload」を使って画像アップロード時にサムネイルを表示したいのですがやり方が分りません。


具体的には

ユーザーがアップロードする画像を選択
 ↓
クライアント(ブラウザ)側で画像のサムネイルを表示
 ↓
自動的に画像をサーバーにアップロード

という流れを行いたいのですが、デモページ(後述)のソースを参考にしてもいまいち理解できませんでした。

具体的にどのような設定を最低限行えば動作しますでしょうか。簡単なサンプルで構いませんのでソース付きだと大変有り難いです。宜しくお願いします。


jQuery File Upload Demo
https://blueimp.github.io/jQuery-File-Upload/basic-plus.html

jQuery File Upload(ドキュメント)
https://github.com/blueimp/jQuery-File-Upload/wiki

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2015/03/02 16:16:03
  • 終了:2015/03/03 17:10:14
id:wankodon

下記サイトのようなプラグイン設置と簡単な使い方について質問しているわけではありませんので宜しくお願いします。
http://ocyadouzo.blogspot.jp/2013/06/jquery-file-upload.html

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4619ベストアンサー獲得回数19552015/03/03 00:31:07

ポイント300pt

デモのページのコードを、そぎ落としてみました。

<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>


<script>
$(function() {
    var url = "...";        // ※ファイルをアップロードする URL
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,       // ※ファイルを選択したら、即、アップロード
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            node.data(data)
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
    });
});
</script>

ファイルを指定したら、すぐにアップロードするように autoUpload のオプションを true にしています。

jQuery-File-Upload の外部スクリプトは、デモのページに向いていますが、ご自分のサーバに導入するときには、そちらの方を指すようにしてください。

https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js は、jQuery-File-Upload には含まれていないと思いますが、これを読み込まないと、デモページの処理が動きません。



因みに、似たような質問が、stackoverflow にもありました。
http://stackoverflow.com/questions/21128634/jquery-file-upload-preview-image

回答のひとつは、デモのページと同じように fileuploadprocessalways のイベントを捕まえる方法。
もうひとつは、add のイベントを捕まえて、そこでアップロードまでしています。
評価は、add のイベントを捕まえる方が高いですが、autoUpload のオプションでアップロードする方が、プラグインの流儀に敵っているような気がします。

他1件のコメントを見る
id:a-kuma3

難しいですよね、このプラグイン。
ドキュメントもしょぼいし (´・ω・`)

2015/03/03 17:59:03
id:wankodon

便利なんですけどね。苦労します。。

2015/03/04 19:30:50

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4619ベストアンサー獲得回数19552015/03/03 00:31:07ここでベストアンサー

ポイント300pt

デモのページのコードを、そぎ落としてみました。

<input id="fileupload" type="file" name="files[]" multiple>
<div id="files" class="files"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="//blueimp.github.io/jQuery-File-Upload/js/jquery.fileupload-image.js"></script>


<script>
$(function() {
    var url = "...";        // ※ファイルをアップロードする URL
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: true,       // ※ファイルを選択したら、即、アップロード
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            node.data(data)
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
    });
});
</script>

ファイルを指定したら、すぐにアップロードするように autoUpload のオプションを true にしています。

jQuery-File-Upload の外部スクリプトは、デモのページに向いていますが、ご自分のサーバに導入するときには、そちらの方を指すようにしてください。

https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js は、jQuery-File-Upload には含まれていないと思いますが、これを読み込まないと、デモページの処理が動きません。



因みに、似たような質問が、stackoverflow にもありました。
http://stackoverflow.com/questions/21128634/jquery-file-upload-preview-image

回答のひとつは、デモのページと同じように fileuploadprocessalways のイベントを捕まえる方法。
もうひとつは、add のイベントを捕まえて、そこでアップロードまでしています。
評価は、add のイベントを捕まえる方が高いですが、autoUpload のオプションでアップロードする方が、プラグインの流儀に敵っているような気がします。

他1件のコメントを見る
id:a-kuma3

難しいですよね、このプラグイン。
ドキュメントもしょぼいし (´・ω・`)

2015/03/03 17:59:03
id:wankodon

便利なんですけどね。苦労します。。

2015/03/04 19:30:50

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません