jquery使用HTML5实现异步上传文件
时间:2017-07-28
HTML5可以使用Ajax和jQuery进行文件异步上传。不仅如此,您可以执行文件验证(名称,大小和MIME类型)或使用HTML5进度标签(或div)处理进度事件,本文章向大家介绍jquery使用HTML5实现文件异步上传。
最近我不得实现一个文件异步上传的功能,但是我不想使用Flash或Iframe或者插件,经过一些研究,我想出了这个解决方案。于是分享给大家:
HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
首先,您可以根据需要进行一些验证。例如,在文件的onChange事件中:
$(':file').on('change', function() {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k')
}
// Also see .name, .type
});
点击按钮并实现AJAX异步上传文件:
$(':button').on('click', function() {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
} , false);
}
return myXhr;
},
});
});
从上面代码你可以看到,HTML5文件上传不仅变得可能而且非常简单。
- 水晶报表WEB方式下不打印的问题
- 针对负载均衡集群中的session解决方案的总结
- sliverlight:CompositionTarget.Rendering 的问题
- 分布式监控系统Zabbix-批量添加聚合图形
- as3: this,stage,root的测试
- 通过iptables限制sftp端口连接数
- Jenkins迁移及日常操作的一点总结
- Nginx反向代理中使用proxy_redirect重定向url
- python try/except/finally
- Jumpserver双机高可用环境部署笔记
- 性能优化
- Nginx基于TCP/UDP端口的四层负载均衡(stream模块)配置梳理
- VB6对滚轮的支持
- 文件实时同步后防篡改的操作记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法