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

三个步骤：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. Leonardo's Notebook UVALive - 3641（置换）

    题意: 给出26个大写字母的置换B,问是否存在一个置换A,使得A2 = B 解析: 两个长度为n的相同循环相乘,1.当n为奇数时结果也是一个长度为n的循环:2. 当n为偶数时分裂为两个长度为n/2 ( ...

  2. 【BZOJ2159】Crash的文明世界（第二类斯特林数，动态规划）

    [BZOJ2159]Crash的文明世界(第二类斯特林数,动态规划) 题面 BZOJ 洛谷 题解 看到\(k\)次方的式子就可以往二项式的展开上面考,但是显然这样子的复杂度会有一个\(O(k^2)\) ...

  3. [poj2528]Mayor's posters

    题目描述 The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campa ...

  4. 有屏幕的地方就有BadApple!！

    Bad Apple!! MV仅由黑白两色组成,如此高的对比度致使它可以在非常廉价由单片机驱动的屏幕上播放,所以,就有了“有屏幕的地方就有Bad Apple!” 原MV链接,没有看过的同学先看一眼吧—— ...

  5. Python数据类型（列表和元组）

    1.3 List(列表) 列表由一系列按特定顺序排列的元素组成. 在Python中,用方括号[ ]来表示列表,并用逗号来分隔其中的元素. 1.3.1 访问列表元素 在Python中,第一个列表元素的索 ...

  6. 深入理解JVM结构

    JVM结构探究---- 1.JVM结构示意图 2.JVM运行时数据区 1)程序计数器(Program Counter Register) 程序计数器是用于存储每个线程下一步将执行的JVM指令,如该方法 ...

  7. 【HDU3085】nightmare2 双向BFS

    对于搜索树分支很多且有明确起点和终点的情况时,可以采用双向搜索来减小搜索树的大小. 对于双向BFS来说,与单向最大的不同是双向BFS需要按层扩展,表示可能到达的区域.而单向BFS则是按照单个节点进行扩 ...

  8. window.open打开页面居中显示

    <script type="text/javascript"> function openwindow(url,name,iWidth,iHeight) { var u ...

  9. MySQL之汇总数据（AVG,COUNT,MAX,MIN,SUM)

    table test Field Type Null Key Default Extra id int(11) NO PRI NULL auto_increment name char(50) NO ...

  10. bug7 java.net.BindException: 端口被占用。

    java.net.BindException:   端口被占用. java.net.BindException:   端口被占用.