１、项目中需要用到文件上传和显示进度，网上各种插件搞得头晕，决定自己实现一个

三个步骤：Ajax上传文件，获取上传进度，显示进度

html:

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>jQuery File Upload Example</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"

          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"

            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

            crossorigin="anonymous"></script>

</head>

<body>

<form action="/upload_ajax/" enctype="multipart/form-data" method="POST">

    <input type="file" id="file"/>

</form>

<button id="btn">上传</button>

<div class="progress" style="width: 500px">

    <div id="progress-bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"

         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">

        <span class="sr-only">40% Complete (success)</span>

    </div>

</div>

<script src="/static/js/jquery-1.9.1.min.js"></script>

<script>

    $(function () {

        $("#btn").on('click', function () {

            UploadFile();

        });

        $("#file").change(function () {

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

        });

        // ajax + jQuery上传

        function UploadFile() {

            var xhrOnProgress = function (fun) {

                xhrOnProgress.onprogress = fun; //绑定监听

                //使用闭包实现监听绑

                return function () {

                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象

                    var xhr = $.ajaxSettings.xhr();

                    //判断监听函数是否为函数

                    if (typeof xhrOnProgress.onprogress !== 'function')

                        return xhr;

                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去

                    if (xhrOnProgress.onprogress && xhr.upload) {

                        xhr.upload.onprogress = xhrOnProgress.onprogress;

                    }

                    return xhr;

                }

            }

            var file = $("#file")[0].files[0];

            var form = new FormData();

            form.append('myfile', file);

            form.append("csrfmiddlewaretoken", '{{ csrf_token }}');

            $.ajax({

                type: 'POST',

                url: '/uploadFile/',

                data: form,

                processData: false,  // 告诉jquery不转换数据

                contentType: false,  // 告诉jquery不设置内容格式

                xhr: xhrOnProgress(function (e) {

                    var percent = e.loaded / e.total;

                    $("#progress-bar").css("width", (percent * 500));

                }),

                success: function (arg) {

                    console.log(arg);

                }

            })

        }

    });

</script>

</body>

</html>

后台：

def upload_file(request):

    if request.method == "POST":  # 请求方法为POST时，进行处理

        myFile = request.FILES.get("myfile", None)  # 获取上传的文件，如果没有文件，则默认为None

        if not myFile:

            return HttpResponse("no files for upload!")

        destination = open(os.path.join("/root/Desktop", myFile.name), 'wb+')  # 打开特定的文件进行二进制的写操作

        for chunk in myFile.chunks():  # 分块写入文件

            destination.write(chunk)

        destination.close()

        return HttpResponse(myFile.name)

效果：

Ajax文件上传并添加Bootstrap进度条的更多相关文章

  1. asp.net 文件上传 Uploadify HTML5 带进度条

    参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中 ...

  2. 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  3. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  4. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

  5. Android OkHttp文件上传与下载的进度监听扩展

    http://www.loongwind.com/archives/290.html 上一篇文章介绍了用Retrofit实现文件的上传与下载,但是我们发现没办法监听上传下载的进度,毕竟我们在做开发的时 ...

  6. 表单文件上传，ajax文件上传

    原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码  index.jsp(表单文件上传) <form action="sh ...

  7. jQuery插件AjaxFileUpload实现ajax文件上传

    转自:http://www.cnblogs.com/linjiqin/p/3530848.html jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个 ...

  8. ajax 文件上传，ajax

    ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...

  9. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

随机推荐

  1. lightoj1038(数学期望dp)

    题意:输入一个数N,N每次被它的任意一个因数所除 变成新的N 这样一直除下去 直到 N变为1 求变成1所期望的次数 解析: d[i] 代表从i除到1的期望步数:那么假设i一共有c个因子(包括1和本身) ...

  2. Bash Game 巴什博弈

    巴什博弈(Bash Game,同余理论):只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先 ...

  3. MT【216】韦达定理

    设$n$为正整数,$a_1,a_2,\cdots,a_n;b_1,b_2,\cdots,b_n;A,B$都是正数, 满足$a_i\le b_i,a_i\le A,i=1,2,\cdots,n$ 且$\ ...

  4. luogu1965 转圈游戏 (快速幂)

    求(m*10^k+x)%n即可 #include<cstdio> #include<cstring> #include<algorithm> #define LL ...

  5. CF1114E Arithmetic Progression（交互题，二分，随机算法）

    既然是在CF上AC的第一道交互题,而且正是这场比赛让我升紫了,所以十分值得纪念. 题目链接:CF原网 题目大意:交互题. 有一个长度为 $n$ 的序列 $a$,保证它从小到大排序后是个等差数列.你不知 ...

  6. RocketMQ介绍与云服务器安装

    RocketMQ 介绍与概念 在github上的说法来看: Apache RocketMQ是一个分布式消息传递和流媒体平台,具有低延迟,高性能和可靠性,万亿级容量和灵活的可扩展性.它提供了多种功能: ...

  7. 【学习笔记 边分树】【uoj400】【CTSC2018】暴力写挂

    题目 描述 ​ 有两棵树\(T\)和\(T'\),节点个数都为\(n\),根节点都为\(1\)号节点; ​ 求两两点之间 $$ \begin{align} depth(x) + depth(y) - ...

  8. time_t和difftime

    在C++中,下面这段代码可以获取一段时间差. time_t t1 = time(NULL); Sleep(); time_t t2 = time(NULL); cout << diffti ...

  9. A1052. Linked List Sorting

    A linked list consists of a series of structures, which are not necessarily adjacent in memory. We a ...

  10. 收藏：解决其它程序与IIS共享80端口的四个方法

    今天写的程序也占用80端口,而 IIS也占用 80端口,我在我的一张网卡上分配了两个IP地址,但是测试发现:只要IIS启动后,我写的程序就无法使用80端口,到网上搜索了一下,终于找到了解决办法: 使用 ...