2014年09月20日

HTML5 の input 要素の type="file" で multiple を使う場合の記述方法と、type="submit" ボタンの FORM 属性の上書き。


<input type="file" 
	name="upload_files[]"
	multiple>
IE11 では、何かと HTML5 の対応が遅れていますが、ファイルを同時に複数選択できる multiple 属性を使用可能です。( もちろん、Google Chrome と Firefox でも使用できます )

PHP 側では、配列で取得できるように、HTML の name 属性の名前の最後に [] を付加します。

MAX_FILE_SIZE の名前を持つフィールドは、PHP の仕様にあわせたものですが、全てのファイルが対象となります。MAX_FILE_SIZE を持つフィールドは、仕様として file フィールドの前にある必要があります
<form method="post"
	target="my_frame"
	action="upload.php"
	enctype="multipart/form-data"
	accept-charset="utf-8">
	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>
	<input name="send"
		type="submit"
		value="アップロード">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>


以下は、PHP のスーパーグローバルを表示した結果です
Array
(
    [upload_files] => Array
        (
            [name] => Array
                (
                    [0] => Create_Alias_AnHttpd.vbs
                    [1] => Create_Alias_AnHttpd_Folder.reg
                    [2] => forms_fileupload_130908.zip
                )

            [type] => Array
                (
                    [0] => 
                    [1] => application/octet-stream
                    [2] => application/x-zip-compressed
                )

            [tmp_name] => Array
                (
                    [0] => 
                    [1] => /var/tmp/phpS3V82b
                    [2] => /var/tmp/php1P8Zgk
                )

            [error] => Array
                (
                    [0] => 2
                    [1] => 0
                    [2] => 0
                )

            [size] => Array
                (
                    [0] => 0
                    [1] => 462
                    [2] => 4055
                )

        )

)
Array
(
    [MAX_FILE_SIZE] => 5000
    [send] => アップロード
)

ここで、一つ目のファイルはサイズ制限の為、アップロードはできていません。

以下は、PHP のコードです
<?php
header( "Content-Type: text/html; Charset=utf-8" );
?>
<pre>
<?php
foreach( $_POST as $key => $value ) {
	$_POST[$key] = @htmlspecialchars($value, ENT_NOQUOTES);
}

print_r($_FILES);
print_r($_POST);

?>
</pre>

現在 IE11 では使用できませんが、FORM 要素と INPUT 要素を関係づける input 要素の form 属性を使った記述方法はこちらから。

<input name="send"
	type="submit"
	formmethod="post"
	formenctype="multipart/form-data"
	formaction="upload.php"
	value="アップロード">
type="submit" ボタンで使用できる、FORM 要素の属性の上書きは、以下のように記述できます。これによって、ボタンによって送り先を自由に変更できる大きなメリットが加わりました。
<form id="form_unit"
	target="my_frame"
	accept-charset="utf-8">

	<input form="form_unit"
		type="range"
		name="userid">

	<br>

	<input name="send"
		type="submit"
		formaction="get.php"
		value="GET送信">

	<input name="send"
		type="submit"
		formmethod="post"
		formaction="post.php"
		value="POST送信">

	<br><br>

	<input type="hidden"
		name="MAX_FILE_SIZE"
		value="5000">
	<input type="file"
		name="upload_files[]"
		multiple>

	<input name="send"
		type="submit"
		formmethod="post"
		formenctype="multipart/form-data"
		formaction="upload.php"
		value="アップロード">

</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="300" >
</iframe>






タグ:HTML5
posted by at 2014-09-20 00:38 | HTML | このブログの読者になる | 更新情報をチェックする