Django中的文件上传+Ajax详细应用

# 获取文件对象file_obj，如果想获取文件的名字，使用file_obj.name即可
file_obj = request.FILES.get("cFile")

前面我们说过，无论你的Data里面写什么数据，ajax发送的时候都会以contentType规定的格式对你的数据进行编码传送；你默认是urlencoded,那我就以
urlencoded的格式发送过去；如果你修改为Json，那我就以json的格式发送。

但是不是所有的情况都需要进行编码传送，例如我传递一个二进制文件，二进制没有必要进行编码，按照原来的文件格式发送即可。

Ajax发送数据的时候，首先会查看processData的值，如果为True,表明我需要对该数据进行处理后发送，至于做什么样的处理，就得问contentType了，contentType会告诉Ajax是把数据处理成urlencoded的形式，还是json字符串

也就是说两者配合工作，如果设置processData为False,表示我的数据是什么样子，你就将数据发送到服务器，让服务器自己接受。因此processData的值就只有两个，True:表示我对数据进行预处理，至于怎么处理，就是contentType要干的事，为False,那就告诉ajax不做处理，直接发送二进制数据即可。
因此processData设置为False,那么contentType也没用了，直接设置为False,将默认的urlencoded清空掉，如果你不设置，那么它默认又以urlencoded进行发送。

$(document).ready(function () {
    // 为每个input输入框绑定的blur事件，并将值通过Ajax发送给后台进行校验
    $("#id_username").blur(function () {
        $.ajax({
            url:"/validate_username/",
            type:"get",
            data:{"username": $("#id_username").val()},
            success:function (data) {
                if(data.flag){
                    alert("This username has benn registered");
                    // $("#error").html("用户名已被注册");
                }else{
                    console.log(data.flag);
                }
            }
        });
        $("#register_btn").submit();
    });

      var handlerPopup = function (captchaObj) {

        // 成功的回调
        captchaObj.onSuccess(function () {
            function foo() {
            $(".error").html("");
        }
            var validate = captchaObj.getValidate();
            var $formData = new FormData();
            $formData.append("username",$(‘#id_username‘).val());
            $formData.append("password", $("#id_password").val());
            $formData.append("password_again", $("#id_password_again").val());
            $formData.append("email", $("#id_email").val());
            $formData.append("mobile", $("#id_mobile").val());
            $formData.append("avatar_image", $("#avatar_file")[0].files[0]);
            $formData.append("csrfmiddlewaretoken", $("input[name=‘csrfmiddlewaretoken‘]").val());
            $formData.append("geetest_challenge", validate.geetest_challenge);
            $formData.append("geetest_validate", validate.geetest_validate);
            $formData.append("geetest_seccode", validate.geetest_seccode);

            $.ajax({
                url: "/pc-geetest/ajax_register_validate", // 进行二次验证
                type: "post",
                dataType: "json",
                data: $formData,
                processData: false,
                contentType:false,
                success: function (data) {
                    if (data && (data.status === "success")) {
                        // 注册数据满足规则，提示注册成功的信息，3秒后跳转到登入界面
                        $("#register_success").html("Congratulations For Register");
                        setTimeout(foo, 3000);
                    } else {
                        //注册数据不满足规则，那就提示错误信息， error_msg是一个字典
                         // 当第一次提示有3个字段错误的时候，我修改一个错误后，那么还剩下2个，刚才剩下的那个
                        //错误应该消失，因为这又是一个ajax请求。
                        $("span").html("");
                        $(".form-group div").each(function () {
                        //其次应该将input输入框的错误红色提示消掉，根据后面的可知，我们应该将input输入框的父级标签div
                            $(this).removeClass("has-error");
                        });

                        $.each(data.error_msg, function (key, value) {
                            console.log(data.error_msg);
                            //1.新建span标签，并增加相应的样式
                            $span = $("<span>");
                            $span.addClass("pull-right").css("color", "red").html(value[0]);
                            //2.将span标签放在对应input输入框下面，通过$("#id_"+key)实现
                            // .parent()是获取input标签的父级标签，要想让整个input输入框变红，必须为div
                            $("#id_"+key).after($span).parent().addClass("has-error");
                            // 3.判断全局钩子函数中定义的密码是否错误
                            if(key === "__all__"){
                                $("#id_password_again").after($span).parent().addClass("has-error");
                            }
                        })
                    }
                }
            });
        });
        $("#popup-submit").click(function () {
            captchaObj.show();
        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#popup-captcha");
    };

     // 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
    $.ajax({
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup",
                offline: !data.success
            }, handlerPopup);
        }
    });
});