JavaScript の XMLHttpRequest を用いたファイルのアップロード方法です。jQuery は使いません。
⇒ jQuery を使う方法はこちら
HTML
HTML
<form id="my_form">
<input type="file" name="file_1">
<button type="button" onclick="file_upload()">アップロード</button>
</form>
【注意】
ボタンに type="button" が無い場合は submit と見なされ、ボタン押下時にブラウザーが勝手にアップロードしてしまいます(現画面を再更新)。そのため、下記 JavaScript によるアップロード処理中には意図しない status が返ってくるため、成功したり失敗したり、不可解な動きとなります。
JavaScript
JavaScript
function file_upload()
{
// フォームデータを取得
var formdata = new FormData(document.getElementById("my_form"));
// XMLHttpRequestによるアップロード処理
var xhttpreq = new XMLHttpRequest();
xhttpreq.onreadystatechange = function() {
if (xhttpreq.readyState == 4 && xhttpreq.status == 200) {
alert(xhttpreq.responseText);
}
};
xhttpreq.open("POST", "http://your_site.com/upload.php", true);
xhttpreq.send(formdata);
}
【補足】
xhttpreq.onreadystatechange = function(){ };
の部分は、
xhttpreq.onload = function(e){ };
または、
xhttpreq.upload.addEventListener("progress", function(e){ }, false);
xhttpreq.upload.addEventListener("load", function(e){ }, false);
xhttpreq.upload.addEventListener("error", function(e){ }, false);
xhttpreq.upload.addEventListener("abort", function(e){ }, false);
という書き方も出来ます。
PHP
PHP
<?php
// 一時アップロード先ファイルパス
$file_tmp = $_FILES["file_1"]["tmp_name"];
// 正式保存先ファイルパス
$file_save = "/var/www/html/save/" . $_FILES["file_1"]["name"];
// ファイル移動
$result = @move_uploaded_file($file_tmp, $file_save);
if ( $result === true ) {
echo "UPLOAD OK";
} else {
echo "UPLOAD NG";
}
?>
(･o･ゞ いじょー。