ＳＱＬの窓
<< Firefox4 : 複数選… | TOP | IME2007 の言語バー… >>

2011年05月22日


Firefox4 専用。XMLHttpRequest を使用した複数ファイルのアップロード

 
元は、Using files from web applications - MDC Docs にあるサンプルの
★ Handling the upload process for a file を使用していますが、できる
限りシンプルになるように変更しています。PHP 側は POST の生データを受
け取ってファイル化するだけですが、ファイル名を渡す為に URL に付加して
$_GET を使えるようにしています

これと組み合わして、Firefox4 : ローカルPCからファイルをドラッグドロップして
ファイルの中身を使用する事ができます を使うと、ドラッグドロップでファイルを簡
単にアップロードする事も可能です

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>

<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {

	// アップロード用
	var xhr = new XMLHttpRequest();

	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		// コードを簡単にする為に、同期処理
		xhr.open("POST", "upload.php?fn="+fileList[i].fileName, false);
	    xhr.sendAsBinary(fileList[i].getAsBinary());

		console.log(xhr.responseText);
	}

}
</script>


</body>
</html>



upload.php

<?
session_start();
if ( $_SESSION['cnt'] == '' ) {
	$_SESSION['cnt'] = 0;
}
$_SESSION['cnt']++;
$file_cnt = "upload".$_SESSION['cnt'];

// hp://input は、POST の生データの読み込みを 許可します。
// enctype="multipart/form-data" に対しては 使用できません。 
$fp = fopen( "php://input", "rb" );
$wfp = fopen( $_GET['fn'], "wb" );

while( $ret = fread( $fp, 4096 ) ) {

	fwrite( $wfp, $ret );

}

fclose($wfp);
fclose($fp);


print $_GET['fn'] ."($file_cnt)\n";
?>
で画像が保存されました
【Firefoxの最新記事】
posted by lightbox at 2011-05-22 10:41 | Firefox | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり