<script>

function change_file_name(){

        $(".up_icon").text("已选择");

        $(".up_icon").css("color","blue");

    }

//上传文件图片

function FileUpload(){

    var upload_type = $(".up_input")[0].value;

    if (upload_type == '') {   //如果等于空

        console.log("没选择文件")

    }else {

        var formData = new FormData();//生成空的form对象

        formData.append("file",$("#file_test")[0].files[0]);//把该文件对象放入formData

        $.ajax({

            url: "{% url 'file_upload' %}",

            data: formData,

            type: 'POST',

            processData:false,

            contentType:false,

            success: function(arg){

                // 当请求执行完成之后，自动调用

                // arg:服务器返回的数据

                $(".up_input").val("");

                $(".up_icon").text("未选择");

                $(".up_icon").css("color","whitesmoke");

            },

            error: function(){

                // 当请求错误之后，自动调用

            }

        });//end ajax

        $(".progress").removeClass("hide");

        GetFileUploadProgress($("#file_test")[0].files[0])

    }

}

function GetFileUploadProgress(fileobj){

    var UploadProgressRefresh = setInterval(function(){

        $.getJSON("{% url 'file_progress' %}",{filename:fileobj.name},function(callback){

            console.log(callback);

            //计算进度条

            var current_percent = parseInt((callback.recv_size/fileobj.size)*100)+"%";//计算百分比

            $(".progress-bar").css("width",current_percent);

            $(".progress-bar").text(current_percent);

            if (fileobj.size == callback.recv_size){//如果文件的大小等于后台传回的大小，终止定时器

                clearInterval(UploadProgressRefresh);

                $(".progress").addClass("hide");

                alert("上传成功");

                //清空进度条

                $(".progress-bar").css("width","0%");

                $(".progress-bar").text(0);

                //传完后删除key

                $.getJSON("{% url 'delete_cache_key' %}",{cache_key:fileobj.name},function(callback){

                    console.log("")

                })

            }

        })

    },1000);

}

</script>

#上传文件

def file_upload(request):

    if request.method == "POST":

        file_obj=request.FILES.get("file") #获取到封装了文件操作的对象

        new_file_path = "upload/%s/%s"%(request.user.userprofile.id,file_obj.name)

        recv_size = 0

        f = open(new_file_path,"wb")

        for line in file_obj.chunks(): #循环取数据

            f.write(line)   #写入

            recv_size += len(line)

            cache.set(file_obj.name,recv_size) #以文件名为key存入缓存

        f.close()

        return HttpResponse("ok")

#进度条获取大小

def file_progress(request):

    filename = request.GET.get("filename")

    progress = cache.get(filename)

    return HttpResponse(json.dumps({"recv_size":progress}))

#传完后删除key

def delete_cache_key(requeat):

    cache_key = requeat.GET.get("cache_key")

    cache.delete(cache_key)

    return HttpResponse("delete cache_key ceccess")