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         500px; 
 7         height:20px; 
 8         } 
 9         #bar { 
10         background:green; 
11         height:20px; 
12         0%; 
13         } 
14     </style>
15      </head>
16 <div id="progress"><div id="bar"></div></div>
17 </html>

其实进度条就是不断改变 “bar”层的宽度，bar层的背景是绿色的，随着上传进度的增加，宽度的百分比不断增加，当完成时，绿色条框也就达到100%