<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’