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

三个步骤：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. 详解HTTP协议

    一 什么是HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议.HTTP 是基于 TCP/ ...

  2. 自学Aruba7.3-Aruba安全认证-802.1x认证（web页面配置）

    点击返回:自学Aruba之路 自学Aruba7.3-Aruba安全认证-802.1x认证(web页面配置) 步骤1 建立AP Group,命名为test802-group 步骤2   将AP加入到AP ...

  3. Service 启动Activity

    1, 在BroadcastReceiver中启动Activity的问题  *  * 如果在BroadcastReceiver的onReceive()方法中如下启动一个Activity  * Inten ...

  4. JAVA 泛型方法 和 静态方法泛型

    /* //  泛型方法和静态方法泛型 泛型类定义的泛型 在整个类中有效 如果被方法使用 那么泛型类的对象明确要操作的具体类型后,所有要操作的类型就已经固定 为了让不同方法可以操作不同类型  而且类型还 ...

  5. Centos6.5使用yum安装mysql

    0. 说明 先要查看yum源是否有你想要的mysql版本 yum list | grep mysql 如果没有则先要更新yum源 yum -y update 更新后即可进行下一步操作. 1. yum安 ...

  6. Centos6.5之ssh免密码登录配置

    Centos6.5之ssh免密码登录配置 centos ssh 免密码登录 0.说明 这里为了方便说明问题,假设有A和B两台安装了centos6.5的主机.目标是实现A.B两台主机分别能够通过ssh免 ...

  7. Java:终于找到了在alloy中的JFileChooser中的弹出式菜单不显示文字的解决办法

    alloy界面可以说是我写过的最漂亮的一种JAVA界面. 可惜不知为什么,至从几年前推出1.4版后,就再也没有更新了. 随着java版本的升级,一直很担心alloy有一天不再适用于java的最新版. ...

  8. 跟我一起使用electron搭建一个文件浏览器应用吧（四）

    在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...

  9. 关于next.js中的css

    css进行了全局和局部的限制 export default () => ( <div className='hello'> <p>Hello World</p> ...

  10. 最短路算法模板--SPFA

    初见SPFA时,直接认成了优先队列优化的Dijkstra,经过几位大佬的指点,我终于明白了他们的差异. Dijkstra是保证已经出队过的点不再入队,SPFA是已经在队列中不再入队.比较起来,SPFA ...