web-dev-qa-db-ja.com

jQuery File Uploadプレビュー画像

Webサイトの画像アップロードにjQuery File Uploadプラグイン（ http://blueimp.github.io/jQuery-File-Upload/ ）を使用しています。 （ https://github.com/blueimp/jQuery-File-Upload/wiki/Options ）を調べましたが、画像を表示する要素を割り当てる設定が見つかりませんでした。このプラグインを使用して、Webページで画像をプレビューするにはどうすればよいですか？

ありがとうございました。

jqueryjquery-file-upload
13
user1995781

Jquery File Uploadプラグインがプレビュー機能を提供するとは思わない。

ただし、プラグインの追加オプションに簡単に実装できます。

add: function (e, data) {
    if (data.files && data.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#target').attr('src', e.target.result);
        }
        reader.readAsDataURL(data.files[0]);
        ...
        data.submit();
    }
}

BlueImpプラグインなしのライブexemple。

45
Fractaliste

プラグインは画像のプレビューをサポートしていますが、高解像度にサイズを変更する方法を見つけようとしています。このような何かをすることでプレビューにアクセスできます：

$('.fileupload-field')
  .fileupload({
     disableImageResize: false, 
     previewMaxWidth: 320, 
     previewMaxHeight: 320
  })
  .bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#some-image").css("background-image", 'url(' + dataURL +')');

  })
9
Dex

"ファイルリーダーAPIはIE-9ではサポートされていないため、画像をプレビューするには、次の手順を実行します。

1> ajaxを使用してサーバーに画像を送信> 2>応答としてアップロードした後、サーバーから画像ソースを取得3>画像ソースを使用して、プレビュー画像タグに追加

1
user3080080