AJAX+H5 上传文件+进度条
2015-11-09 14:43
477 查看
1.舍去form表单改为使用新型的formData进行传输
2.页面上的上传文件控件:
4.后台可以使用任何语言接受进行上传,增加一个进度条,使用h5标签
5.增加对进度条的控制js事件
6.formData到底是个什么东西?
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
详细介绍:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
2.页面上的上传文件控件:
<input type="file" id="file" class="mr10 ml10 input-medium">3.ajax实现上传:
function uploadSaveProjects(obj){ var fileObj = document.getElementById("file").files[0]; // 获取文件对象 var FileController = baseUrl + "project/upload"; // 接收上传文件的后台地址 // FormData 对象 var form = new FormData(); form.append("author", "hooyes"); // 可以增加表单数据 form.append("file", fileObj); // 文件对象 // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { alert("上传完成!"); }; // 实现进度条功能 // xhr.upload.addEventListener("progress", progressFunction, false); xhr.send(form); }
4.后台可以使用任何语言接受进行上传,增加一个进度条,使用h5标签
<progress id="progressBar" value="0" max="100"></progress> <span id="percentage"></span>
5.增加对进度条的控制js事件
function progressFunction(evt) { var progressBar = document.getElementById("progressBar"); var percentageDiv = document.getElementById("percentage"); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } }
6.formData到底是个什么东西?
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
详细介绍:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
相关文章推荐
- HTML5 中的下载简化处理
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
- 各大浏览器对HTML5和CSS3的特性的支持力度
- html5已经废弃了cellpadding,cellspacing
- HTML5的这些api你知道吗?
- H5性能调优
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- html5的canvas绘制线条,moveTo和lineTo详解
- html5新增DOM
- html5新属性,事件,API方法 笔记1.
- 离线安装Cloudera Manager 5和CDH5.3.8(上)
- html5兼容IE
- HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
- 基于HTML5的WebGL电信网管3D机房监控应用
- 基于HTML5的WebGL电信网管3D机房监控应用
- 图片旋转、无限滚动、文字跳动
- HTML5-Canvas画布的使用
- HTML5 表单元素
- 用HTML5播放IPCamera视频
- 才一年,H5的发展就成这样了......