110
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

[JavaScript] Ajaxでファイルをアップロード【jQuery使用】

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・ゞ いじょー。

参考URL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
110
Help us understand the problem. What are the problem?