ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点)。
那么具体怎么样实现ajax上传文件呢?
一般来说,浏览器获取文件的方法有拖拽和input_file两种:
// 先定义一个放文件的数组
var files = [];
//拖拽事件获取文件
div.addEventListener('drop',function(ev){
//因为dataTransfer.files只是类数组,所以要用Array.from转换一下
files = files.concat(Array.from(ev.dataTransfer.files));
},false) // 从input_file获取files,假设有n个name为f1的input_file元素
let input_files = Array.from(document.getElementsByName('f1'));
uploadBtn.onclick = function(){
input_files.forEach(input=>{
files = files.concat(Array.from(input.files));
})
let formData = new FormData();
files.forEach(file=>{
formData.append('name~~',file);
})
let xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(ev){
console.log('进度:'+(100*ev.loaded/ev.total).toFixed(2)+'%');
}
xhr.open('POST','url~~',true);
xhr.send(formData);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status==200){
alert('上传成功~~');
files = [];
}
}
}
}
ps:进度的显示那里,博主之前一直写错为xhr.onprogress,如果写成这样,那么进度过程就不会出现,直接让你等待,直到100%才显示
记住上传的时候无论是onprogress、onload还是onerror,都是xhr.upload对象下的事件才会生效,否则就会检测不了上传的过程,特别是xhr.upload.onprogress
ajax上传文件及进度显示的更多相关文章
- 不带插件 ,自己写js,实现批量上传文件及进度显示
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- 闲话ajax,例ajax轮询,ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...
- 用iFrame模拟Ajax上传文件
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
随机推荐
- Linux内核分析第五周学习总结
扒开系统调用的三层皮(下) 20135237朱国庆+ 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/UST ...
- jquery打印页面(jquery.jqprint)
使用jquery进行打印时,所需js包:jquery-1.4.4.min.js.jquery.jqprint-0.3.js 但如果使用高版本的jquery(jquery-1.9.1.min.js)时, ...
- Metrics.NET step by step使用Metrics监控应用程序的性能
使用Metrics监控应用程序的性能 在编写应用程序的时候,通常会记录日志以便事后分析,在很多情况下是产生了问题之后,再去查看日志,是一种事后的静态分析.在很多时候,我们可能需要了解整个系统在当前,或 ...
- Cron任务调度CronNET
Cron任务调度CronNET 阅读目录 1.Cron介绍和工具 2.CronNET介绍和使用 3.cron-expression-descriptor使用 4.资源 如果用知乎,可以关注专栏:.NE ...
- elastic-search-kibana-in-docker-dotnet-core-app
[翻译] 使用ElasticSearch,Kibana,ASP.NET Core和Docker可视化数据 原文地址:http://www.dotnetcurry.com/aspnet/1354/e ...
- shell脚本--制作自己的服务脚本
首先注意一下,我用的环境是centos6.5,中间有一些操作和在Ubuntu上有一些地方的操作是不同的, 编写脚本 首先看一个实例:假设有一个test的服务,可以通过命令对test进行启动.关闭或者重 ...
- 使用telnet模拟http请求
HTTP 首先我们需要知道http报文是由一系列的字符串组成的.然后我们来了解具体的相关事项. 方法 HTTP支持几种不同形式的请求命令,这些命令就被称为HTTP方法.每个HTTP请求报文都包含一个方 ...
- [转帖]召冠总的 Oracle常用的性能诊断语句. --保存学习备查
Copyfrom https://www.cnblogs.com/zhaoguan_wang --1.阻塞及等待事件信息查询-- 查询所有会话的状态.等待类型及当前正在执行的SQL脚本select t ...
- 使用highlightjs自定义markdown代码高亮
目录 概述 实现方法 概述 最近使用markdown来写一些技术文档和博客,觉得真心不错,这才是程序员该用的编辑器嘛~~ Mou在mac上的 markdown 编辑器,很简约,可惜Mou好像只支持标准 ...
- GlusterFS 增删节点及改变复制份数
一.增加节点 1.需要主机添加到主机池中 gluster peer probe server3 gluster peer probe server4 2.查看状态 3.添加节点并复制2份(增加复制 ...