HTML5——摒弃插件和前端框架的异步文件上传
之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能。一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等。可以不再使用Flash插件实现动画。然并卵,觉得这些东西跟平时用到的有什么关系,因为我从来不需要在网页中嵌入什么视频,音频甚至是动画。这也是对我来说HTML5跟之前的版本没有太大区别的一个原因。
HTML5本质上还是HTML语言,简单易用,只是增加了标签(我是这么认为),这个对浏览器厂商的要求,即使再加几个标签叫HTML10跟开发Web应用程序的关系不大,因为最重要的是浏览器的支持。
在实际中,我要做的是一个邮件群发的功能,其中邮件账号是上传csv文件,因为主要是演示一下html5的异步上传,所以我将业务需求简化为上传csv文件,文件的每行只有一个邮箱账号,读取文件的内容,判断是否为邮箱,为邮箱返回成功,否则返回邮件格式不对。并没有加入信息存入数据库或服务器等代码。以往的html ajax实现不了异步上传,需要加入jquery等异步上传的插件或者使用一些前端框架。演示的代码的前端使用HTML5,后端使用的是Spring MVC框架,实现的一个简易的异步文件上传功能。
后端代码简单没有什么可说的,先看下后端代码:
诚如所见,如果为非邮箱格式返回 “error” , 格式正确返回 “success”
前端 js 代码如下:
1 function upLoad(){ 2 // 获取文件对象 3 var fileObj = document.getElementById("myfile").files[0]; 4 // 接收上传文件的后台地址 5 var url= "${ctx}/emailMass/emailMass.do"; 6 // FormData 对象 7 var form = new FormData(); 8 form.append("myfile", fileObj); 9 10 form.append("emailAccount", $("#emailAccount").val()); 11 12 // XMLHttpRequest 对象 13 var xhr = new XMLHttpRequest(); 14 xhr.open("post", url, true); 15 16 17 xhr.onload = function () { 18 if(xhr.responseText=="success"){ 19 alert("群发消息成功"); 20 } 21 22 if(xhr.responseText=="error"){ 23 alert("邮箱格式有误,请检查"); 24 } 25 }; 26 xhr.send(form); 27 }
注意:1 xhr.onload 回调函数并没有参数,不能像普通的ajax 回调函数中 有一个 data 参数,如function (data){},这个data的值即返回值,
XMLHTTPRequest对象是通过 responseText获得返回值得。
2 后端程序的返回值如果为中文,会存在乱码,这两点都是在使用ajax 时候不会遇到的。
3 ie8不支持FormData这个对象,如果是一个后台的管理系统一般不必考虑浏览器兼容问题,若是前台供客户使用的系统要考虑到浏览器是否支持慎用此方法。
现在即使开发前台系统也不会再兼容ie6了,还用ie6的用户是抛弃了时代,这样的用户我们也抛弃他(最头痛的就是兼容问题,以前我们常这么打趣的说),希望那一天也抛弃ie8,我相信不会远(偷笑)
前端的js除了返回值如果是中文乱码我没有解决(所以我返回英文,然后翻译成中文),如果表单元素太多,通过FormData对象的append方法一个一个添加,也是件麻烦事
使用HTML5的上传是不是很简洁?
作为对比,可以看看其他异步上传的方法
如果使用的是 ajaxfileupload ,首先你需要引入js <script src="../js/ajaxfileupload.js"></script>
前台代码如下:
1 $(function(){ 2 //选择文件之后执行上传 3 $('#fileToUpload').on('change', function() { 4 $.ajaxFileUpload({ 5 url:'/emailMass/emailMass.do', 6 fileElementId:'myfile',//file标签的id 7 dataType: 'json',//返回数据的类型 8 data:{emailAccount:$("#emailAccount").val()},//一同上传的数据 9 success: function (data, status) { 10 11 if(data=="success"){ 12 alert("群发消息成功"); 13 } 14 15 if(data=="error"){ 16 alert("邮箱格式有误,请检查"); 17 } 18 }, 19 error: function (data, status, e) { 20 alert(e); 21 } 22 }); 23 }); 24 25 });
似乎使用别的方式也并不复杂,只需要引入其他js即可,确实如此,但是引入的js 要跟jquery 版本适应,不然很容易出现冲突,从而前台js报错,无法执行。
Html5也是得显示进度便得简单,只需在原有的上传函数中加入如下代码:
1 xhr.upload.onprogress = function (ev) { 2 var percent = 0; 3 if(ev.lengthComputable) { 4 percent = 100 * ev.loaded/ev.total; 5 document.getElementById('bar').style.width = percent + '%'; 6 } 7 }
其中“bar”是进度条的id,你并不需要关心 ev.loaded 和 ev.total ,ev对象中浏览器已经做好了一切,总共有多少数据,上传了多少等内容
为了看得更清楚,进度条的静态html如下:
1 <html> 2 <head> 3 <style> 4 #progress{ 5 border: 1px solid blue; 6 width:500px; 7 height:20px; 8 } 9 #bar { 10 background:green; 11 height:20px; 12 width:0%; 13 } 14 </style> 15 </head> 16 <div id="progress"><div id="bar"></div></div> 17 </html>
其实进度条就是不断改变 “bar”层的宽度,bar层的背景是绿色的,随着上传进度的增加,宽度的百分比不断增加,当完成时,绿色条框也就达到100%