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

三个步骤：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. Hibernate基本应用01

    一. Hibernate简介 1.1 Hibernate介绍 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全 ...

  2. java访问权限表

    private(私有的) 默认的(什么都不写) protected(受保护的) public(公共的 ) 同一个类中 yes   yes yes   yes 同一个包中不同类之间 no yes yes ...

  3. day10 局部变量 全局变量 作用域前奏

    规则命名以及基本介绍 name="LHF" # 顶头写的全局都可以调用的就是全局变量,命名规则要求大写全局变量 def chang_name(): # global name # ...

  4. 洛谷 P2341 [HAOI2006]受欢迎的牛 解题报告

    P2341 [HAOI2006]受欢迎的牛 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的"喜欢&q ...

  5. 部署kubernetes1.8.4+contiv高可用集群

    原理和架构图参考上一篇,这里只记录操作步骤.由于东西较多,篇幅也会较长. etcd version: 3.2.11 kube version: 1.8.4 contiv version: 1.1.7 ...

  6. java -server 和 -client 的不同，及 java -server 时抛错原因

    在dos窗口运行:java -server Error: missing `server' JVM at `C:\Program Files\Java\jre7\bin\server\jvm.dll' ...

  7. 洛谷 P3956 棋盘(BFS)

    传送门:Problem P3956 https://www.cnblogs.com/violet-acmer/p/9827010.html 题解: BFS 相关变量解释: color[maxn][ma ...

  8. 漏洞评估工具Nexpose的配置使用

    nexpose是领先的漏洞评估工具之一.Nexpose社区版是一个免费的程序,其他版本是收费的.在这篇文章中,我们将使用Nexpose免费社区版,里面有扫描32主机的能力.用户界面干净.报告强大.像大 ...

  9. linux命令总结iostat命令

    简介 iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间 ...

  10. npm脚本

    在package.json的script里面我们可以写很多npm脚本,下面我来总结一下一些日常遇到的知识点: 1.npm_lifecycle_event npm 提供一个npm_lifecycle_e ...