日時： 2017/06/17 14:56
名前： lightbox
ファイルを選択した後、確認の為の画像表示を行います
$.ajax の呼び出し先は同一ドメインである必要がありますが、呼び出し先が 『Access-Control-Allow-Origin: *』を http ヘッダで返せばその限りではありません
拡張子:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>HTML 基本テンプレート</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<!-- 共通の表示 -->
<link rel="stylesheet" href="common.css">
<!-- CSS の指定 -->
<style>
/* PC 用の表示 */
@media screen and ( min-width:480px ) {
#content {
margin: 20px;
}
}
/* スマホ用の表示 */
@media screen and ( max-width:479px ) {
#content {
margin: 0px;
}
body {
width: 100%!important;
margin: 0px;
}
.unit {
width: 100%;
}
}
</style>
<script>
// 簡易的なスマホチェックを jQuery のプロパティとして登録
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if ( $.isMobile ) {
// スマホの場合は表示画面下の中央
toastr.options.positionClass = "toast-bottom-center";
}
$(function(){
$("#file_data").on("change", function(){
$("#image").html("");
toastr.info("ファイルが選択されました");
for( i = 0; i < this.files.length; i++ ) {
console.dir( this.files );
var reader = new FileReader();
reader.name = this.files[i].name;
$(reader).on("load", function () {
$("<img>").appendTo("#image")
.prop( {"src": this.result, "title": this.name } ) // title にはオリジナルファイル名
.css( {"width": "200px", "margin": "10px" } );
});
if (this.files[i]) {
reader.readAsDataURL(this.files[i]);
}
}
} );
$("#upload").on("click", function(){
// 新規送信用オブジェクト
var formData = new FormData();
formData.append("target", $("#file_data").get(0).files[0]);
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "../upload/file_upload.php",
type: "POST",
data: formData,
processData: false, // jQuery がデータを処理しないよう指定
contentType: false // jQuery が contentType を設定しないよう指定
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
toastr.info("アップロード処理が完了しました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
toastr.info("アップロードに失敗しました");
})
.always(function() {
})
;
});
// このページ自身の QRコードの表示
$('#qrcode')
.css({ "margin" : "20px" })
.qrcode({width: 160,height: 160,text: location.href });
});
</script>
</head>
<body>
<div id="head">
<div id="title">
<a href="./">HTML 基本テンプレート</a>
</div>
</div>
<div id="content">
<input id="file_data" type="file" class="btn btn-info">
<input type="button" id="upload" value="アップロード" class="btn btn-success">
</div>
<div id="image"></div>
<div id="qrcode"></div>
</body>
</html>
 | 
一つのファイルアップロードするテンプレート
ブラウザ側では、HTML のフォームのみでファイルを選択して送信します。
サーバ側は PHP でファイルを保存し、結果を JavaScript で返します。
ブラウザへの送信は、元のページに設置した IFRAME 内に送るので、ページがロードされると、parent となる元の画面に JavaScript でメッセージを表示します