ajax上傳文件 基於jquery form表單上傳文件

<script src="/static/js/jquery.js"></script>
<script>
    $("#reg-btn").click(function () {
        // 1. 取到用戶填寫的數據
        var form_data_obj = new FormData();
        form_data_obj.append('username',$('#id_username').val());
        form_data_obj.append('password',$('#id_password').val());
        form_data_obj.append('re_password',$('#id_re_password').val());
        form_data_obj.append('phone',$('#id_phone').val());
        form_data_obj.append('email',$('#id_email').val());
        form_data_obj.append('csrfmiddlewaretoken',$("[name= 'csrfmiddlewaretoken']").val());
        form_data_obj.append('avatar',$('#avatar')[0].files[0]);
        // 2. 日後端發post請求
        $('#reg-btn').click(function(){
            $.ajax({
                url:'/reg/',
                type:'post',
                data:form_data_obj, processData: false, contentType: false,
                success:function (response) {
                    console.log(response);
                    {#錯誤信息爲1，則展現錯誤信息#}
                    if(response.code ===1){$.each(response.msg, function (k,v) {
                        console.log('k',k);
                        console.log('v',v);
                        $('#id_'+k).next().text(v[0]).parent().addClass('has-error')
                    })}
                    else if(response.code ===0){location.href=response.msg}

                }
            })
        })
        });


    // 每個input標籤獲取焦點的時候，把本身下面的span標籤內容清空，把父標籤的has-error樣式移除
    $("input.form-control").focus(function () {
        $(this).val('').next("span").text('').parent().removeClass('has-error');
    });


    // 前端頁面實現頭像預覽
    // 當用戶選中文件以後，也就是頭像的input標籤有值時觸發
    $('#avatar').change(function () {
        var file = this.files[0];
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function(){
            $('#avatar-img').attr('src',fr.result)

        }
    })

 

注意點：

　　ajax上傳文件，藉助FormData對象

　　同時增長兩組鍵值對

   processData:false,  //tell jQuery not to process the data
   contentType: false,  //tell jQuery not to set contentType


form組件上傳文件

<form action="http://localhost:8081/thingsparse/addorupdthingsparse" method="post" enctype="multipart/form-data">
<input type="file" name="file" value="選擇jar包"/>
<input id="submit_form" type="submit" class="btn btn-success save" value="保存"/>
</form>

 

注意：每條form表單參數都須要有name屬性，以及form表單的enctype="multipart/form-data"。提交按鈕type=‘submit’