ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
一つのファイルアップロードするテンプレート
日時: 2017/06/17 14:55
名前: lightbox







ブラウザ側では、HTML のフォームのみでファイルを選択して送信します。
サーバ側は PHP でファイルを保存し、結果を JavaScript で返します。
ブラウザへの送信は、元のページに設置した IFRAME 内に送るので、ページがロードされると、parent となる元の画面に JavaScript でメッセージを表示します

※ IFRAME 内は同一ドメインである必要があります
<!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(){

	// このページ自身の 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">

	<form target="upload" enctype="multipart/form-data" action="../upload/file_upload_html.php" method="POST">
		<input name="target" type="file" class="btn btn-info">
		<input type="submit" value="ファイルを送信" class="btn btn-success ">
	</form>

</div>

<div id="qrcode"></div>

<iframe src="about:blank" name="upload" style="display:none;"></iframe>



</body>
</html>
common.css
@charset "UTF-8";

/* 共通の表示 */
* {
	font-size: 16px;
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
}
#head {
	background-color: #404040;
	padding: 10px 0 10px 25px;
}
#head * {
	color: #ffffff;
}
メンテナンス

PHP 側の処理 ( No.1 )
日時: 2017/06/17 02:03
名前: lightbox


日時: 2017/06/17 02:03
名前: lightbox
file_upload_html.php
<?php
session_cache_limiter('nocache');
session_start();

header( "Content-Type: text/html; charset=utf-8" );


if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
 
	$upload = realpath ( '.' );
	$upload .= ( DIRECTORY_SEPARATOR . $_FILES['target']['name'] );
	if ( move_uploaded_file(
		$_FILES['target']['tmp_name'], $upload ) ) {
		$_POST['result']  = "アップロードに成功しました";
	}
	else {
		$_POST['result']  = "アップロードに失敗しました";
	}

}
else {
	$_POST['result']  = "POST メソッドを使用して下さい";
}

$_POST['files'] = $_FILES;

$json = json_encode($_POST, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE );
?>
<script>

var json = <?= $json ?>;

parent.toastr.info(json.files.target.name + " がアップロードされました");
parent.toastr.info("ファイルサイズ : " + json.files.target.size);

</script>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
jQuery の $.ajax で FormData オブジェクトを送信する ( No.2 )
日時: 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>

このアーティクルの参照用URLをクリップボードにコピー メンテナンス
PHP 側の処理 ( No.3 )
日時: 2017/06/17 14:51
名前: lightbox
application/json として JSON 文字列を返します
<?php
session_cache_limiter('nocache');
session_start();

header( "Content-Type: application/json; charset=utf-8" );


if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
 
	$upload = realpath ( '.' );
	$upload .= ( DIRECTORY_SEPARATOR . $_FILES['target']['name'] );
	if ( move_uploaded_file(
		$_FILES['target']['tmp_name'], $upload ) ) {
		$_POST['result']  = "アップロードに成功しました";
	}
	else {
		$_POST['result']  = "アップロードに失敗しました";
	}

}
else {
	$_POST['result']  = "POST メソッドを使用して下さい";
}

$_POST['files'] = $_FILES;

print json_encode($_POST, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE );
?>

▼ 別ドメインからのアクセスを許可する場合に追加
header( "Access-Control-Allow-Origin: *" );
このアーティクルの参照用URLをクリップボードにコピー メンテナンス