(20211209 作業メモ) JQuery easyui でファイルを送る

9 12月
12月 9, 2021

JQuery easyui の Form の使い方を整理します。まずフォルダー構成ですが、下図のような感じです。files フォルダーにクライアントからファイルを送り込みます（書き込み許可を忘れない）。easyui のフォルダーはダウンロードしたものを展開しただけです。

index.html の表は下図のようなものです。

そのソースは下記。もともとの form のサブミットボタンを使用しません。easyui のリンクボタンを利用します。easyui のドキュメントもそのようになっているのですが，そうすることでデザイン的にも統一されます。微妙な高さのずれもありません。もともとのサブミットボタンを利用すると高さがずれていました。コードもまったく別なものになりますが。

<html>
<head>
    
<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<title>Test for File Up load</title>

<script src="./jquery-easyui-1.10.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.10.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.10.0/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.10.0/demo/demo.css">
<script type="text/javascript" src="./jquery-easyui-1.10.0/jquery.easyui.min.js"></script>    

</head>

<body>


<div style="position: absolute; left:10px; top: 10px;">

	<form id="ff" class="easyui-form" method="post" enctype="multipart/form-data"  style="width:330px" >
	
		<input name="file" class="easyui-filebox" style="width:230px" data-options="label:'File', labelPosition:'top' ,buttonText: 'Choose'">		
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm();" style="">Submit</a>
		
	</form>
</div>


<script type="text/javascript">

	function submitForm(){		
		$('#ff').form('submit',{		
			url : 'upload.php',
			
			onSubmit : function(param) {						
				param.param1 = 'Hello!';
			},			
			success : function(data) {
				alert(data);
			}											
		});				 
	}
		
</script>
			

</body>
</html>

ファイルと合わせて、テキストのメッセージも渡します。下記が受け取る PHP のコードです。

<?php

$param1 = $_POST["param1"];

$tmpname = basename($_FILES['file']['name']);

if ($param1) {

	echo $param1 . "\n";

}

if (move_uploaded_file($_FILES['file']['tmp_name'], "./files/" . $tmpname)) {
	echo "./files/" . $tmpname . "\n";
} else {
	echo "Failed to save" . "\n";
}

?>

JQuery と easyui の他にはプラグインを必要としません。