ニュースリリース
jQuery PHP リアルタイムでファイル(画像[jpg,png,gif]、PDF等)アップロードしたい方向け

2018.11.27

jQuery PHP リアルタイムでファイル(画像[jpg,png,gif]、PDF等)アップロードしたい方向け

3,447

ファイルをアップロードさせるシステムの組み込みって面倒ですよね？
『input[type=file]』を設置して、$_FILES(※PHPの場合)で取得してディレクトリにアップして、データを『input[type=hidden]』に持たせてあげる等々(´・ω・)
これがリアルタイムでファイルをアップする仕組みにすると、手間のいくらかが軽減出来ます(*’ω’*)
早速やってみましょう。

まずHTMLの基本的な配置をやってみます。以下です。

<form method="post" action="(省略)" enctype="multipart/form-data">
ファイル:<input type="file" name="file_hoge">
<input type="hidden" name="hidden_hoge">
</form>

ファイル:<input type="file" name="file_hoge">

</form>

HTMLはこんな感じで設置して次はjQueryですね。非同期通信を使います(*’▽’)

<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
	$(document).on( "change" , "[name='file_hoge']" , function() {
		var selfObj = $(this);
		if ( selfObj.val() !== '' ) { // 存在チェック
			var files = selfObj.prop("files"); // アップされたファイルデータをfilesという変数に入れてます。
			if ( files.length > 1 ) { // こちらでファイルのアップ数を制限します。今回は1枚のみにします。
				console.log('Error:ファイルが複数選択されています。');
			} else {
				var fd = new FormData();
				fd.append( "mode" , "upload_pdf" );
				fd.append( "file" , selfObj.prop("files")[0] );

				var postData = {
					type : "POST",
					dataType : "json",
					data : fd,
					processData : false,
					contentType : false
				};
				$.ajax(
					'file_upload.php',
					postData
				).done( function( res_data ) {
					if ( res_data.err ) {
						console.log('Error:php側で指定したエラー');
					} else if ( res_data.document_filename ) {
						$("[name='hidden_hoge']").val(res_data.document_filename);
					} else {
						console.log('Error:何かしらのエラー');
					}
					// [type=file]を初期化
					var name_label = selfObj.attr('name');
					selfObj.replaceWith('<input type="file" name="'+name_label+'">');
				});
			}
		}
	});
});
</script>

$(function () {

$(document).on( "change" , "[name='file_hoge']" , function() {

var selfObj = $(this);

if ( selfObj.val() !== '' ) { // 存在チェック

var files = selfObj.prop("files"); // アップされたファイルデータをfilesという変数に入れてます。

if ( files.length > 1 ) { // こちらでファイルのアップ数を制限します。今回は1枚のみにします。

console.log('Error:ファイルが複数選択されています。');

} else {

var fd = new FormData();

fd.append( "mode" , "upload_pdf" );

fd.append( "file" , selfObj.prop("files")[0] );

var postData = {

type : "POST",

dataType : "json",

data : fd,

processData : false,

contentType : false

};

$.ajax(

'file_upload.php',

postData

).done( function( res_data ) {

if ( res_data.err ) {

console.log('Error:php側で指定したエラー');

} else if ( res_data.document_filename ) {

$("[name='hidden_hoge']").val(res_data.document_filename);

} else {

console.log('Error:何かしらのエラー');

}

// [type=file]を初期化

var name_label = selfObj.attr('name');

selfObj.replaceWith('<input type="file" name="'+name_label+'">');

});

}

});

</script>

こんな感じですね(‘ω’)ノ
これから受け取りのPHPの処理をしてあげます。

<?php
if ( $_POST['mode'] === 'upload_pdf' ) {
	// $arrFileParamはJSON形式で最後、返す用です。
	$arrFileParam = array();
	if ( $_FILES["file"]["error"] != 0 ) {
		if ( $_FILES["file"]["error"] == 1 ) {
			$arrFileParam["err"] = "アップできる容量の制限を超えています。";
		} else {
			$arrFileParam["err"] = "アップされたファイルが不正です。";
		}
	} elseif ( $_FILES["file"]["type"] !== 'application/pdf' ) {
		$arrFileParam["err"] = "アップ出来るのはPDFファイルのみです。";
	} else {
		// ファイル名を取得
		$arrFileParam["document_name"] = $_FILES['file']['name'];
		// ファイルの拡張子を取得
		$ext = pathinfo( $arrFileParam["document_name"] , PATHINFO_EXTENSION );
		$filename = md5( uniqid( rand() , 1 ) ) .'.'. $ext;
		do{
			$filename = md5( uniqid( rand() , 1 ) ) .'.'. $ext;
		} while( file_exists( $filename ) ); // ファイルが存在しないなら処理終了
		$arrFileParam["document_filename"] = $filename;

		if ( is_uploaded_file($_FILES['file']['tmp_name']) ) {
			if ( ! move_uploaded_file( $_FILES['file']['tmp_name'] , $filename ) ) {
				$arrFileParam["err"] = "正常にファイルがアップされませんでした。";
				echo json_encode( $arrFileParam );
				exit;
			}
		} else {
			$arrFileParam["err"] = "正常にファイルがアップされませんでした。";
			echo json_encode( $arrFileParam );
			exit;
		}
		echo json_encode( $arrFileParam );
		exit;
	}
}
?>

<?php

if ( $_POST['mode'] === 'upload_pdf' ) {

// $arrFileParamはJSON形式で最後、返す用です。

$arrFileParam = array();

if ( $_FILES["file"]["error"] != 0 ) {

if ( $_FILES["file"]["error"] == 1 ) {

$arrFileParam["err"] = "アップできる容量の制限を超えています。";

} else {

$arrFileParam["err"] = "アップされたファイルが不正です。";

}

} elseif ( $_FILES["file"]["type"] !== 'application/pdf' ) {

$arrFileParam["err"] = "アップ出来るのはPDFファイルのみです。";

} else {

// ファイル名を取得

$arrFileParam["document_name"] = $_FILES['file']['name'];

// ファイルの拡張子を取得

$ext = pathinfo( $arrFileParam["document_name"] , PATHINFO_EXTENSION );

$filename = md5( uniqid( rand() , 1 ) ) .'.'. $ext;

do{

$filename = md5( uniqid( rand() , 1 ) ) .'.'. $ext;

} while( file_exists( $filename ) ); // ファイルが存在しないなら処理終了

$arrFileParam["document_filename"] = $filename;

if ( is_uploaded_file($_FILES['file']['tmp_name']) ) {

if ( ! move_uploaded_file( $_FILES['file']['tmp_name'] , $filename ) ) {

$arrFileParam["err"] = "正常にファイルがアップされませんでした。";

echo json_encode( $arrFileParam );

exit;

}

} else {

$arrFileParam["err"] = "正常にファイルがアップされませんでした。";

echo json_encode( $arrFileParam );

exit;

}

echo json_encode( $arrFileParam );

exit;

}

後は、『input[type=hidden]』にファイル名が入るので、それを他ページで持ちまわすなり、それを基にヴァリデーションを組むなりすればOKって寸法です(*’ω’*)
他にもファイルアップ時にアップされたファイルを表示させたい等はphpファイルでのjsonの返り値あたりをカスタムしてあげれば簡単に可能です。
また使用は自己責任でお願いします、でわ(‘ω’)ノ

なかむら

プログラムが少しわかる人間です。

jQuery PHP リアルタイムでファイル(画像[jpg,png,gif]、PDF等)アップロードしたい方向け

Share

最新の記事

Contact