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表单参数都需要有name属性，以及form表单的enctype="multipart/form-data"。提交按钮type=‘submit’