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

三个步骤：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. Educational Codeforces Round 8 B. New Skateboard

    题目链接:http://codeforces.com/problemset/problem/628/B 解题思路: 一个数最后两位数能被4整除那么这个数就能被4整除,而且题目还是连续的子序列,这就很简 ...

  2. 自学Zabbix3.12.6-动作Action-Escalations配置

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 3.12.6 自学Zabbix3.12.6-动作Action-Escalations配置 1. 概 ...

  3. [NOI2012] 骑行川藏 | 求导 二分

    一个能看的题解!预备知识只有高中数学的[导数].不用什么偏导数/拉格朗日乘子法之类的我看不懂的东西( •̀∀•́ )! 如果你不知道什么是导数,可以找本高中数学选修2-2来看一下!看第一章第1.2节就 ...

  4. JDK源码分析（1）ArrayList

    JDK版本 ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomA ...

  5. STL总结

    容器类放入的都是元素的拷贝,而非引用.所以如果需要对元素做出改动,最好是把元素存在data[N]数组中,而仅仅在容器中存放数组下标. 函数传递容器类参数时,需要传引用,否则会超时. vector ve ...

  6. JSP总结(一)——基础(汇总)

    前言:原本呢,是打算只写个JSP的内置对象总结,但是没想到这个家伙的JSP总结非常不错,我就拿来用了. 注:后缀为汇总的基本上是整理一些网上的. 借鉴地址:http://www.cnblogs.com ...

  7. JS中every()和some()的用法

    every()与some()方法都是JS中数组的迭代方法. every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true. some()是对数组中每一项运行给定函数,如果 ...

  8. Node.js npm uuid

    nodejs 提供了一个 node-uuid 模块用于生成 uuid 使用方法为 const uuidV1 = require('uuid/v1'); uuidV1(); 或者为 const uuid ...

  9. SVN 错误：Error validating server certificate for 'https://xxxxxxx':443... Mac os svn客户端证书验证缓存 解决

    mac上的SVN今天突然间 不好使了 在进行SVN操作是报出警告信息 Error validating server certificate for 'https://xxxxxxx':443 - T ...

  10. linux_shell使用

    一.hash命令 说明:linux系统下会有一个hash表,当你刚开机时这个hash表为空,每当你执行过一条命令时,hash表会记录下这条命令的路径,就相当于缓存一样.第一次执行命令shell解释器默 ...