做微信企业号的时候,在‘我的日志'功能模块里边需要添加一个上传文件的功能,并且要显示上传过程中的进度条和提交后的文件名列表,于是做了基于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. 2018-01-19 Xtext试用: 5步实现一个(中文)JVM语言

    续上文Xtext试用: 快速实现简单领域专用语言(DSL). 基于官方教程: Five simple steps to your JVM language 达成如下语言: 它被Quan6JvmMode ...

  2. 【读书笔记】iOS-iOS安全基础知识

    一,iOS硬件/设备的类型. iPad的问世,就是在这一方向上迈出的第一步.第一代iPad使用了ARM Cortex-A8架构的CUP,它的速度大约是第一代iPhone所使用CPU速度的两倍. iPa ...

  3. react+antd分页 实现分页及页面刷新时回到刷新前的page

    antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看 ...

  4. 【转】ASP.NET Core 依赖注入

    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...

  5. JMeter Sampler之BeanShellSampler的使用

    Sampler之BeanShellSampler的使用 by:授客 QQ:1033553122 欢迎加入软件性能测试交流群:7156436 1.  Bean Shell简介 ·         Bea ...

  6. Angular2 富文本编辑器 ng2-ckeditor 的使用

    本文介绍如何在 Angular 中使用 ng2-ckeditor 控件,示例代码基于 angular 6.0.2,node 8.11.2,  ng2-ckeditor 4.9.2 环境   1. 安装 ...

  7. Expect 安装 on centos7

    本文演示如何在CentOS7上安装和使用Expect. 使用场景 在主机A上编写并且执行Shell脚本,Shell脚本中需要ssh到主机B上执行交互命令. 安装 在主机A上安装expect: yum ...

  8. python 3.3.2报错:No module named 'urllib2'

    ModuleNotFoundError: No module named 'urllib3' 1. ImportError: No module named 'cookielib'1 Python3中 ...

  9. 洗礼灵魂,修炼python(18)--温故加知新

    类型转换: 1.str(),repr(),format():将非字符串数据转换为字符串 str():对象序列化的结果,相当于print输出 repr():程序中某个对象精确值 format():利用特 ...

  10. node webpack4.6简单配置

    package.json { "name": "his-web", "version": "0.0.0", " ...