做微信企业号的时候，在‘我的日志'功能模块里边需要添加一个上传文件的功能，并且要显示上传过程中的进度条和提交后的文件名列表，于是做了基于ajax的文件上传，UI用的是MUI框架，后台是TP框架

前端代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script type="text/javascript" src="~/js/jquery.min.js"></script>

    <script type="text/javascript" src="~/mui/dist/js/mui.min.js"></script>

</head>

<body>

    <form enctype="multipart/form-data">

        <div>

            <div class="maven-form-file">

                <button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-plus maven-btn-file">选择文件</button>

                <input type="file" id="doc-form-file" multiple="multiple" />

                <div id="demo" class="mui-progressbar">

                    <span></span>

                </div>

                <div id="file-list">

                </div>

            </div>

            <input type="hidden" name="token" value='' />

            <input type="hidden" name="user_id" value='' />

            <input type="hidden" name="wecha_id" value='' />

            <div class="mui-button-row">

                <button type="submit" class="mui-btn mui-btn-primary">确认</button>

                <a href="javascript:history.back()" class="mui-btn mui-btn-danger">取消</a>

            </div>

        </div>

    </form>

    <script type="text/javascript">

        $(function () {

            // mui("#demo1").progressbar({progress:20}).show();

            $('#doc-form-file').on('change', function () {

                var fileNames = '';

                var formData = new FormData();

                formData.append("myfile", this.files[0]);

                if (this.files[0] == undefined) {

                    mui.alert('你没选文件', "提示", "确定");

                    return false;

                }

                var process = 0;

                mui("#demo")[0].style.visibility = 'visible';

                mui("#demo").progressbar({ progress: 10 }).show();

                $.ajax({

                    url: "/UploadFile/Upload",

                    type: "POST",

                    data: formData,

                    contentType: false,//必须false才会自动加上正确的Content-Type

                    processData: false,//必须false才会避开jQuery对 formdata 的默认处理

                    xhr: function () { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

                        myXhr = $.ajaxSettings.xhr();

                        if (myXhr.upload) { //检查upload属性是否存在

                            //绑定progress事件的回调函数

                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);

                        }

                        return myXhr; //xhr对象返回给jQuery使用

                    },

                    success: function (data) {

                        mui("#demo")[0].style.visibility = 'hidden';

                        if (data.status == 1) {

                            fileNames = '<span class="mui-badge mui-badge-success">' + data.filename + '</span> <input type="hidden" name="files[]" value="' + data.id + '">';

                            $('#file-list').append(fileNames);

                        }

                        mui.alert(data.info, "提示", "确定");

                    },

                    error: function () {

                        mui.alert("上传失败！", "提示", "确定");

                    }

                });

            });

            function progressHandlingFunction(e) {

                var curr = e.loaded;

                var total = e.total;

                process = curr / total * 100;

                mui("#demo").progressbar().setProgress(process);

            }

    </script>

</body>

</html>

上传的时候用到FormData对象，将文件组装成一组用 XMLHttpRequest发送请求的键/值对。然后放到ajax的data里边，但是要给ajax设置参数

  • contentType: false,//必须false才会自动加上正确的Content-Type
  • processData: false,//必须false才会避开jQuery对 formdata 的默认处理

进度条的实现：
在ajax的xhr的回调函数里，给他的upload属性添加onprogress事件回调，在回调函数里添加进度条的样式，回调函数的e对象里边包含loaded属性(已上传的大小)，和total属性(文件的总大小),通过这个比例计算进度。

原文链接

ajax上传文件以及实现上传进度条（转载）的更多相关文章

  1. 用winscp从本地上传文件到服务器上出现复制文件到远端时错误。

    用winscp从本地上传文件到服务器上出现复制文件到远端时错误. 错误码:4 服务器返回的错误消息:write failed 报错如下图所示: 分析过程: 1.刚开始以为是权限不够,后面上网查了一下是 ...

  2. Git学习笔记——从一台电脑上传文件到Github上

    目标:从一台电脑上传文件到Github上 前提: 1.这里假定已在Github上创建了仓库,建立了仓库 2.已在这台电脑上安装了Git客户端 实验环境: 1.Windows 10 64位,已安装了Gi ...

  3. 7.Flask-上传文件和访问上传的文件

     1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...

  4. Flask-上传文件和访问上传的文件

     1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...

  5. XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地

    使用XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地. 1.第一种方法是最常用的 :如果下载了Xshell和Xftp,Ctrl+Alt+F就可以选择文件的互传了!(虚拟机/云服务 ...

  6. Html+Ajax+Webservice 实现文件跨域上传

    1. 界面HTML <p >上传文件: <input id="zfiles" type="file" name="file" ...

  7. Android上传文件至服务器(上)

    每一次都不能上首页,真悲催..管理员让我上一次首页? 很多时候我更愿意一个人写代码,与其在垃圾代码上改改改,我更愿意直接重构. 整洁的代码简单直接.整洁的代码如同优美的散文.整洁的代码从不隐藏设计者的 ...

  8. RN 上传文件到以及上传文件到七牛云（初步）

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...

  9. Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)

    1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...

随机推荐

  1. 【读书笔记】iOS-button只显示在一个界面的右下角，不管界面大小怎么变化（xib，没有使用自动布局)(一)

    一,新建立一个工程,Hello,如图所示. 二,Xcode--->New--->File--->FirstViewController---->选中Also create XI ...

  2. VUE 实现复制内容到剪贴板功能

    注: 依赖第三方插件 clipboard 一.安装插件 npm install vue-clipboard2 --save 二.全局注入(main.js) import VueClipboard fr ...

  3. Mysql存储引擎特性总结

    几个常用存储引擎的特点 下面我们重点介绍几种常用的存储引擎并对比各个存储引擎之间的区别和推荐使用方式. 特点 Myisam BDB Memory InnoDB Archive 存储限制 没有 没有 有 ...

  4. Loadrunner 脚本开发-soap_request函数介绍及WebService接口测试

    脚本开发- soap_request函数介绍及WebService接口测试 by:授客 QQ:1033553122 函数介绍 soap_request 函数执行一个SOAP请求 函数原型 int so ...

  5. Java并发编程（五）Lock

    一.synchronized的缺陷 synchronized是java中的一个关键字,也就是说是Java语言内置的特性.那么为什么会出现Lock呢? 在上面一篇文章中,我们了解到如果一个代码块被syn ...

  6. 使用spark DStream的foreachRDD时要注意哪些坑？

    答案: 两个坑, 性能坑和线程坑 DStream是抽象类,它把连续的数据流拆成很多的小RDD数据块, 这叫做“微批次”, spark的流式处理, 都是“微批次处理”. DStream内部实现上有批次处 ...

  7. Wim镜像编辑

    1.挂载install.wim文件为本地的一个文件夹 dism /mount-wim  /wimfile:D:\install.wim /index:1 /mountdir:D:\Win 注:1> ...

  8. 洗礼灵魂，修炼python（50）--爬虫篇—基础认识

    爬虫 1.什么是爬虫 爬虫就是昆虫一类的其中一个爬行物种,擅长爬行. 哈哈,开玩笑,在编程里,爬虫其实全名叫网络爬虫,网络爬虫,又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者 ...

  9. vi 复制或剪切多行超级强大方法

    同一个文件:光标移到起始行,输入ma 光标移到结束行,输入mb 光标移到粘贴行,输入mc 然后 :'a, 'b co 'c 把 co 改成 m 就成剪切了多个文件:在文件一: 光标移到起始行,输入ma ...

  10. PHP LAMP环境搭建及网站配置流程（完整版）

    心血来潮想做一个自己的博客网站,写一些文章做技术分享,平时遇到的一些问题的解决办法都记录下来,网站搭建成功,那么第一篇博客自然就是整个网站的搭建以及域名的注册.备案.解析流程,总共分为以下几步: 1. ...