元は、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の最新記事】
- Firefox の Firebug で、実行済みのページのソースをクリップボードにコピーする
- Firefox のアドオンのサンプルを使って『作成方法』を知る為の準備
- Firefox ヘルプ : 新しいタブが最後のタブの右側に表示されない
- Greasemonkey で、NAVER まとめの表示順の初期表示を『更新順』にする
- Firefox で localStorage を編集するアドオン(FireStorage)は、GNU GPL なのでダウンロード(インストール) できるようにしました
- Firefox6 の postMessage でオブジェクトが引き渡されるのを確認しました
- Firefox6 : 気になる変更点、postMessage のオブジェクト引き渡しと、アドレスバーのスクリプトの直接入力
- Firefox で localStorage を編集するアドオン
- Firefox4 : 複数選択ファイルアップロードの準備
- Firefox4 : ローカルPCからファイルをドラッグドロップしてファイルの中身を使用する事ができます
- Firefox 4.0 のオレンジ色のアプリケーションメニューとメニューバー
- Firefox 4.0 限定機能らしい「XPIファイルを展開しない」というオプション変更できる Configuration Mania というアドオン
- Firefox でのクッキーのメンテナンス( 標準で利用できるツールの場合 )
- Firefox で簡単にクッキーを削除する方法
- Firebug の変更可能なショートカットのデフォルト値
- Firebug で要素を調査 / Firefox アドオン
- Greasemonkey でSeesaa の記事投稿のテキストエリアの右上に保存ボタンと記事一覧画面の一括編集ボタン
- Greasemonkey : YouTube にダウンロードリンクを付加
- Firefox拡張のバージョン制限の直接書き換え
