【JQuery】「jQuery-File-Upload」でアップロードするイメージのプレビューを表示してみる
おはようございます。
久しぶりの JQuery 記事です。
今回は、ファイルをアップロードする時に便利なプラグイン「jQuery-File-Upload」で、
アップロードする前にプレビューを表示する方法を試してみました。
サクッとですが。。
スポンサーリンク
プログラム
html
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge"/> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <title>サンプルファイルアップロード</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"/> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/css/jquery.fileupload.min.css" /> <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/css/jquery.fileupload-ui.min.css" /> <link rel="stylesheet"href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" /> <link rel="stylesheet"href="css/style.css" /> </head> <body> <div class="wrapper" > <div style="margin: 20px;"> <pre> アップロードしたイメージをプレビューします ドラッグアンドドロップもOK </pre> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal"> <div class="form-group"> <div class="form-inline"> <div class="col-md-2"> <label class="control-label">ファイル</label> </div> <div class="input-group col-md-6"> <input type="text"class="form-control ime-disabled"id="inputIcon"placeholder="ファイルを選択" /> </div> <div class="input-group col-md-2"> <span class="btn btn-primary fileinput-button"> <i class="fa fa-plus"></i> <span>アップロード</span> <input type="file"id="fileupload"name="file"></input> </span> </div> </div> </div> <div class="form-group"> <div class="form-inline"> <div class="col-md-2"> <label class="control-label">プレビュー</label> </div> <div class="input-group col-md-6"> <img id="iconImage"style="width:50vh; height:50vh;" /> </div> </div> </div> </form> </div> </div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/vendor/jquery.ui.widget.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.iframe-transport.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.fileupload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.2.0/js/jquery.fileupload-ui.min.js"></script> <script src="js/script.js"></script> </body> </html> |
javascript
js/script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /** * ページ読み込み時の処理 */ $(function(){ // アップロード用ファイルの登録 $("#fileupload").fileupload({ disableImageResize:false, previewMaxWidth:320, previewMaxHeight:320, dropZone:$(".wrapper"), done:function(e,data){ console.log(data); }, add:function(e,data){ console.log(data); if(data.files&& data.files[0]) { $("#inputIcon").val(data.files[0].name); varreader=newFileReader(); reader.onload=function(e){ $("#iconImage").attr("src",e.target.result); } reader.readAsDataURL(data.files[0]); data.submit(); } } }); }); |
add メソッドで、ファイルを読み込み画面の「img」タグにデータを流し込む感じですね。
後はサーバーに送ってファイルとしてサーバー上に書き出すか、DBにそのまま入れるかすれば保存できます。
画面イメージ
無事にプレビュー表示することができました。
まとめ
ひとまずサクッとプレビューのみ試してみました。（画像以外は考慮してません）
次回は未定ですが、そのうち色々弄ってみたいと思います。
何かのお役に立てれば。
ではでは。