【JQuery】「jQuery-File-Upload」でアップロードするイメージのプレビューを表示してみる
おはようございます。
久しぶりの JQuery 記事です。
今回は、ファイルをアップロードする時に便利なプラグイン「jQuery-File-Upload」で、
アップロードする前にプレビューを表示する方法を試してみました。
サクッとですが。。
スポンサーリンク
プログラム
html
index.html
<!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
/**
* ページ読み込み時の処理
*/
$(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);
var reader = new FileReader();
reader.onload = function(e) {
$("#iconImage").attr("src", e.target.result);
}
reader.readAsDataURL(data.files[0]);
data.submit();
}
}
});
});
add メソッドで、ファイルを読み込み画面の「img」タグにデータを流し込む感じですね。
後はサーバーに送ってファイルとしてサーバー上に書き出すか、DBにそのまま入れるかすれば保存できます。
画面イメージ
無事にプレビュー表示することができました。
まとめ
ひとまずサクッとプレビューのみ試してみました。（画像以外は考慮してません）
次回は未定ですが、そのうち色々弄ってみたいと思います。
何かのお役に立てれば。
ではでは。