小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2017年 > 1月 > 14日

非同期処理でファイルを送る方法（jquery）

2017年01月14日

Logging

<script type="text/javascript">
    $("#isubmit").click(function(){
        var formdata = new FormData($("#iform").get(0));//form ID
        $("#isubmit").prop('disabled', true);
        $.ajax({
            type : 'post',                      // HTTPメソッド
            url  : '/hoge/index.php',           // POSTするURL
            data: formdata,         // POSTするデータ
            processData: false,
            contentType: false,
            dataType: 'json',                   // レスポンスのデータ型
            success: function(obj) {      // 成功時の処理
                if(obj.err==""){
                    location.reload();
                    return false;
                }else{
                    var strComment = obj.err;
                    alert(strComment);
                    $("#isubmit").prop('disabled', false);
                }
                return false;
            },
            error: function(e) {                 // HTTPエラー時の処理
                var strComment = 'Server Error. Please try again later.';
                alert(e);
                $("#isubmit").prop('disabled', false);
            }
        });
    });
</script>

非同期処理でファイルを送る方法の勘所は2箇所。

        var formdata = new FormData($("#iform").get(0));//form ID

 

            processData: false,
            contentType: false,

これが大事な箇所です。この2箇所がないとファイルの非同期は
成立しません。
 

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2017年01月14 05:55日

タグ

'disabled', 'Server Error, contentType, form ID, function, iform, index.php, isubmit, location.reload, new FormData, obj.err, Please try again later, processData, prop, return false, script type, script&gt, var formdata, var strComment, ファイル,