之前我从来没有体会到HTML5的便利，直到这次需要一个异步上传的功能功能。一开始我以为文件的一些声明必须为HTML5才管用，后来才知道添加了很多以前没有的标签，并可以直接播放视频，音频等。可以不再使用Flash插件实现动画。然并卵，觉得这些东西跟平时用到的有什么关系，因为我从来不需要在网页中嵌入什么视频，音频甚至是动画。这也是对我来说HTML5跟之前的版本没有太大区别的一个原因。

　　HTML5本质上还是HTML语言，简单易用，只是增加了标签（我是这么认为），这个对浏览器厂商的要求，即使再加几个标签叫HTML10跟开发Web应用程序的关系不大，因为最重要的是浏览器的支持。

　　在实际中，我要做的是一个邮件群发的功能，其中邮件账号是上传csv文件，因为主要是演示一下html5的异步上传，所以我将业务需求简化为上传csv文件，文件的每行只有一个邮箱账号，读取文件的内容，判断是否为邮箱，为邮箱返回成功，否则返回邮件格式不对。并没有加入信息存入数据库或服务器等代码。以往的html ajax实现不了异步上传，需要加入jquery等异步上传的插件或者使用一些前端框架。演示的代码的前端使用HTML5，后端使用的是Spring MVC框架，实现的一个简易的异步文件上传功能。

　　

　　后端代码简单没有什么可说的，先看下后端代码：

　　诚如所见，如果为非邮箱格式返回 “error” , 格式正确返回 “success”

前端 js 代码如下：

 function upLoad(){

 　　　　// 获取文件对象

  　　　　var fileObj = document.getElementById("myfile").files[];

 　　　　// 接收上传文件的后台地址

  　　　　var url= "${ctx}/emailMass/emailMass.do";

 　　　　// FormData 对象

  　　　　var form = new FormData();

 　　　　form.append("myfile", fileObj);

 　　　

  　　　　form.append("emailAccount", $("#emailAccount").val());

 　　　

  　　　　// XMLHttpRequest 对象

  　　　　var xhr = new XMLHttpRequest();

 　　　　xhr.open("post", url, true);

 　　　　xhr.onload = function () {

 　　　　　　　　if(xhr.responseText=="success"){

 　　　　　　　　　　alert("群发消息成功");

 　　　　　　　　}

 　　　　　　　　if(xhr.responseText=="error"){

 　　　　　　　　　　alert("邮箱格式有误，请检查");

 　　　　　　　　}

 　　　　};

 　　　　xhr.send(form);

 }

注意：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>

前台代码如下：

  $(function(){

      //选择文件之后执行上传

      $('#fileToUpload').on('change', function() {

           $.ajaxFileUpload({

               url:'/emailMass/emailMass.do',

               fileElementId:'myfile',//file标签的id

               dataType: 'json',//返回数据的类型

               data:{emailAccount:$("#emailAccount").val()},//一同上传的数据

               success: function (data, status) {

                 　　　

 　          if(data=="success"){

  　　　　　　　　　　alert("群发消息成功");

  　　　　　　　　}

  　　　　　　 if(data=="error"){

  　　　　　　　　　　alert("邮箱格式有误，请检查");

 　　　　　　　　}

              },

              error: function (data, status, e) {

                  alert(e);

              }

          });

      });  

  });

似乎使用别的方式也并不复杂，只需要引入其他js即可，确实如此，但是引入的js 要跟jquery 版本适应，不然很容易出现冲突，从而前台js报错，无法执行。

Html5也是得显示进度便得简单，只需在原有的上传函数中加入如下代码：

  xhr.upload.onprogress = function (ev) {

                 var percent = ;

                 if(ev.lengthComputable) {

                     percent =  * ev.loaded/ev.total;

                     document.getElementById('bar').style.width = percent + '%';

                 }

             }

其中“bar”是进度条的id，你并不需要关心 ev.loaded 和 ev.total ，ev对象中浏览器已经做好了一切，总共有多少数据，上传了多少等内容

为了看得更清楚，进度条的静态html如下：

 <html>

     <head>

     <style>

         #progress{

         border: 1px solid blue;

         width:500px;

         height:20px;

         }

         #bar {

         background:green;

         height:20px;

         width:%;

         }

     </style>

      </head>

 <div id="progress"><div id="bar"></div></div>

 </html>

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

HTML5——摒弃插件和前端框架的异步文件上传的更多相关文章

  1. 前端异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  2. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  3. Struts2框架下的文件上传文件类型、名称约定

    Struts2框架下的文件上传机制:1.通过multipart/form-data form提交文件到服务器2.文件名是通过什么地方设置的?在strust2的FileUploadInterceptor ...

  4. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

  5. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  6. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  7. JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

    异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...

  8. 摒弃FORM表单上传图片，异步批量上传照片

    之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...

  9. Bottle + WebUploader 修改Bottle框架从而大文件上传实现方案

    Bottle 是个轻量级的Web框架,小巧又强大,真不愧是个轻量级的框架.可扩展性非常好,可以扩展很多功能,但是有些功能就不得不自己动手修改了. Bottle:http://www.bottlepy. ...

随机推荐

  1. C#析构函数与垃圾回收

    析构函数基本语法 C# class Car { ~ Car() // destructor { // cleanup statements... } } 析构函数说明 不能在结构中定义析构函数.只能对 ...

  2. linux自动定时备份web程序和mysql数据库

    前些天受朋友说linux定时备份不知道怎么搞,叫帮忙处理一下.由于这段时间正闲着,所以也就欣然答应.由于朋友对linux不懂也希望我将操作的过程记录下来,也就是越详细越好.所以写得比较$%^& ...

  3. redis pub/sub 实战: 微信语音识别

    2015年5月22日 20:20:20 星期五 效果: 这边对微信说话,  浏览器端及时显示语音识别的文字 注意: 在连接socket.io时, 按下浏览器f12, 如果一直有请求不断的刷, 说明so ...

  4. zpf框架的business使用方法

    2015年3月9日 10:58:42 controller 是接受数据分派任务的地方 model 接收controller来的数据, 获取并处理数据库中的数据, 然后再返回给controller 的业 ...

  5. nyoj_95_众数问题_map练习

    众数问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...

  6. 关于C语言中的转义字符

    1.转义字符的分类 1. 1一般转义字符 这种转义字符,虽然在形式上由两个字符组成,但只代表一个字符.常用的一般转义字符为: \a     \n     \t     \v     \b     \r ...

  7. C#传真传址 结构体

    1.传真  传址 namespace 传值_传址 { class Program { //格式1:无参无返 public void LeiJia() { Console.Write("请输入 ...

  8. POJ 1830 开关问题 (高斯消元)

    题目链接 题意:中文题,和上篇博客POJ 1222是一类题. 题解:如果有解,解的个数便是2^(自由变元个数),因为每个变元都有两种选择. 代码: #include <iostream> ...

  9. python基础——sorted()函数

    python基础——sorted()函数 排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个d ...

  10. 利用 Rational ClearCase ClearMake 构建高性能的企业级构建环境

    转载地址:http://www.ibm.com/developerworks/cn/rational/r-cn-clearmakebuild/ 构建管理是 IBM® Rational® ClearCa ...