jQuery.ajax()でファイルをアップロードする方法
HTML
<form name="file" method="post" action="./file_upload.php" enctype="multipart/form-data">
<input type="file" id="uploader" name="file_data" />
<p id="uploader-status"></p>
</form>
javascript
function file_upload()
{
// 送信先
var sendUrl = "http://localhost/sample/fileup.php";
$("#uploader-status").text("");
var fd = new FormData();
if ($("#uploader").val()!== ''){
fd.append("file",$("#uploader").prop("files")[0]);
}else{
$("#uploader-status").text("ファイルを選択してください。");
return;
}
var postData = {
url:sendUrl,
type:"POST",
dataType:"text",
data:fd,
processData:false,
contentType:false,
beforeSend:function(){
form_disabled(true);
$("#uploader-status").text("アップロード中…");
}
};
$.ajax(postData).done(function(data){
form_disabled(false);
$("#uploader-status").text(data);
// ファイル選択をクリアする
$("#uploader").val("");
}).fail(function(data){
$("#uploader-status").text("アップロードに失敗しました。");
});
}
function form_disabled(value)
{
$("#uploader").prop("disabled",value);
$("#upload-btn").prop("disabled",value);
}
PHP
<?php
$uploadFolder = "./Uploads/";
if (isset($_FILES["file"]["tmp_name"]) && file_exists($_FILES["file"]["tmp_name"]))
{
// 同名のファイルが存在しているなら、ファイル名の末尾に数字を付ける
// ファイル名[1].txt
$nm = $_FILES["file"]["name"];
$rnm = "";
if (file_exists($uploadFolder . $nm))
{
$i = 1;
$rnm = $nm;
while (file_exists($uploadFolder . $rnm))
{
$info = pathinfo($nm);
$rnm = $info["filename"] . "[". $i ."]" . "." . $info["extension"];
$i++;
}
}
// 一時ファイルを保存先に移動
$uploadPath = $uploadFolder . ($rnm !== "" ? $rnm:$nm);
// Warningを出力しないようにする
if (@move_uploaded_file($_FILES["file"]["tmp_name"],$uploadPath) === true)
{
echo "アップロードに成功しました。";
return;
}
}
echo "アップロードに失敗しました。";
?>