jQuery の ajax() を用いたファイルのアップロード方法です。
⇒ 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($('#my_form').get(0));
// POSTでアップロード
$.ajax({
url : "http://your_site.com/upload.php",
type : "POST",
data : formdata,
cache : false,
contentType : false,
processData : false,
dataType : "html"
})
.done(function(data, textStatus, jqXHR){
alert(data);
})
.fail(function(jqXHR, textStatus, errorThrown){
alert("fail");
});
}
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･ゞ いじょー。