Ajaxファイルアップロード
jQuery Ajaxで画面遷移せずにファイルをアップロード
jQuery
$(function() {
// アップロードするファイルを選択
$('input[type=file]').change(function() {
var file = $(this).prop('files')[0];
// アップロード
var fd = new FormData();
fd.append($(this).attr('name'), file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: fd,
processData: false, // jQueryがデータを処理しないよう指定
contentType: false // jQueryがcontentTypeを設定しないよう指定
}).done(function(result) {
// 実行中
}).fail(function() {
// 失敗
$('#result').html('失敗');
}).always(function(result) {
// 完了
if (result.state == 'success') {
$('#result').html('成功');
} else {
$('#result').html('失敗');
}
});
});
});
HTML
<form method="post">
<input type="file" name="userfile">
<div id="result"></div>
</form>
ファイルのアップロードを参照。
PHP
if (getFileUpload($_FILES['userfile'], '/home/appli/var/', $upload_name = '')) {
$state = 'success';
} else {
$state = 'failure';
}
$result['state'] = $state;
// JSON形式にして返す
header('Content-Type: application/json');
echo json_encode($result);
exit;
