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;

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について