jQuery Ajaxファイルアップロード [Javascript]

2017-10-16

ajax, file-upload, javascript, jquery, post

質問：

Ajaxリクエストのpostメソッドを使ってファイルをアップロードしたいんだけど、こんなjQueryコードって使える？

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

もし可能であれば、「data」の部分を記入しておく必要ある？これって正しい方法？僕はファイルをサーバー側に送信したいだけなんだ。

色々ぐぐってみたけど、僕が見つけたのはプラグインだけで、できれば使いたくないんだ。少なくとも現時点では。

By Willy | 質問日時： 2010年2月23日 16:58

回答1:

XHR2ではAJAXによるファイルアップロードがサポートされてるよ。例えば、FormDataオブジェクトを通して。

でも残念だけどすべてのブラウザでサポートされてるわけじゃないし、古いブラウザでは動かない。

FormDataのサポートは、下のバージョンのデスクトップ・ブラウザから開始される。

IE 10+、
Firefox 4.0以降、
Chrome 7以上、
Safari 5以上、
Opera 12以上

詳細については、MDNリンクを参照

By Adeel | 回答日時： 2010年2月23日 17:03

回答2:

getSize関数を使用してサイズを確認する、それかgetType関数を使用して型をチェックするのがいいかな。
プログレスバーhtmlとcssコードも追加しておいたよ。

var Upload = function (file) {
    this.file = file;
};
Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();
    // assocのキー値を追加。これは投稿の値になる
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);
    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            //ここに君のコールバック
        },
        error: function (error) {
            // ハンドルエラー
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};
Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    //君のコードに合うようにprogressbarsクラスを更新して
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Uploadクラスの使い方

// 自分のIDに変更すること
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);
    //　たぶんここでサイズを確認するか、upload.getSize()かupload.getType()でここに入力させる。
    
    //アップロードを実行する
    upload.doUpload();
});

プログレスバーのHTMLコード

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

プログレスバーのCSSコード

#progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    height: 30px;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
    height: 100%;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

By Ziinloader | 回答日時： 2012年5月30日 7:00

Source: jQuery Ajax File Upload