做微信企业号的时候，在‘我的日志'功能模块里边需要添加一个上传文件的功能，并且要显示上传过程中的进度条和提交后的文件名列表，于是做了基于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. 【BI学习笔记】在Linux上安装Wyn Enterprise商业智能报表服务器

    在百度文库上找来的,放到这里,避免以后丢了. 葡萄城出品的Wyn Enterprise商业智能软件的设计器和查看视图是通过浏览器使用的,不需要安装专门的程序.Wyn Enterprise的服务器端可以 ...

  2. 跨站请求伪造（CSRF）

    1. 什么是跨站请求伪造(CSRF)  CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者session Riding,通常缩 ...

  3. 常见问题--post发送参数使用httpservletrequest读取为空

    1)springcloud项目中使用request.getparameter读取参数为空 原因:使用restcontroller导致,之前为controller.而通过requestbody注解封装为 ...

  4. ER模型试题

    M公司为了便于开展和管理各项业务活动,提高公司的知名度和影响力,拟构建一个基于网络的会议策划系统. [需求分析结果] 该系统的部分功能及初步需求分析的结果如下 : (1)M公司旗下有业务部.策划部和其 ...

  5. MySQL崩溃恢复与组提交

      Ⅰ.binlog与redo的一致性(原子) 由内部分布式事务保证 我们先来了解下,当一个commit敲下后,内部会发生什么? 步骤 操作 step1 InnoDB做prepare redo log ...

  6. LCD显示异常分析——开机闪现花屏【转】

    转自LCD显示异常分析--开机闪现花屏 最近在工作中,有同事遇到LCD开机瞬间会闪现雪花屏的问题,而这类问题都有个共同点,那就是都发生在带GRAM的屏上,同样的问题,在休眠唤醒时也会出现. 其实这类问 ...

  7. owncloud 实现私有云进行多端文件同步

    研究生生涯开始了,事情逐渐多了起来.都没时间写博客了... 开学实验室配了台电脑,我把主机装上了Fedora 作为我的服务器.平时有些实验室的材料,经常几个电脑一起看,使用U盘拷来拷去很是麻烦.今天重 ...

  8. ccf--20150303--节日

    本题思路:首先,计算a月1日是星期几,然后再通过b和c得出日期monday,最后判断monday是否合法. 题目与代码如下: 问题描述 试题编号: 201503-3 试题名称: 节日 时间限制: 1. ...

  9. JAVA中实现单例(Singleton)模式的八种方式

    单例模式 单例模式,是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例的特殊类.通过单例模式可以保证系统中,应用该模式的类一个类只有一个实例.即一个类只有一个对象实例. 基本的实现思路 单 ...

  10. 添加Nginx为系统服务(设置开机启动)

    在本节中,我们将创建一个脚本,将Nginx守护进程转换为实际的系统服务. 这有两个作用:守护程序可以使用标准命令控制,更重要的是,它可以在系统启动时自动启动,并在系统关闭时停止. System V s ...