控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

HTML5+flash打造兼容各浏览器的文件上传方案

作者:未知 出处:cnblog 2013年12月03日 阅读:

上一篇文章介绍了HTML5版的文件上传插件,相比flash,采用HTML5的新技术无疑可以提升程序的加载速度。但是在目前的情况看来,HTML5的特性支持度不高,插件的可用性范围确实比较窄。例如,我在插件中使用到的新特性有:

<input type="file' />标签的multiple属性
File和FileList API
XMLHttpRequest2的upload和onprogress
FormData
  就拿File来讲,IE9都不支持,所以在当前环境下IE系列浏览器几乎无法使用。因此做一个兼容方案还是有必要的。如何做兼容呢?这不是废话,忘了你的H5版uploadify是怎么来的了?我们可以在不支持这些特性的浏览器上运行flash版的uploadify。

  锁定目标,我们要做的其实只需三步:

写一个适配器,用来检测客户端浏览器对HTML5的这些特性的支持程度
如果支持,则动态加载HTML5版本的插件所需的js和css文件,调用H5版本的插件
如果不支持,动态加载flash版本的插件所需的js和css文件,调用flash版本的插件
  我给适配器命名为uploadAdapter,这样一来,我们的文件结构应该变成了这样:

 

  其中Huploadify就是我上一篇所写的HTML5版,uploadify为官方的flash版本,原封不动放在这里。为了动态调用js和css文件,我还专门写了一个jquery.loadscript.js,用来动态加载文件。这样所需的东西就全了。

使用方法
  因为改为了动态加载文件,页面上需引入的文件只有下面三个:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<script type="text/javascript" src="jquery.uploadAdapter.js"></script>
  在调用的时候,我们直接使用uploadAdapter就可以了,其他的工作适配器自动完成了,像这样:


$('#upload').uploadAdapter({
        auto:true,
        buttonText:'选择文件',
        fileObjName:'file',
        fileTypeExts:'*.jpg;*.png;*.exe',
        multi:true,
        formData:{key:123456,key2:'vvvv'},
        fileSizeLimit:9999,
        showUploadedPercent:true,
        showUploadedSize:true,
        removeTimeout:9999999,
        uploader:'upload.php'
    });

  为了避免使用在项目中的时候出现动态调用的路径错误,在uploadAdapter中还新增了一个配置项:

baseUrl : 'url/uploadAdapter' //指定uploadAdapter的根目录
  另外,如果你想手工指定想要调用的插件类型,这里也提供了一个配置:

pluginType : 'html5' //手工指定插件类型,字符串,html5或flash

  样式上有一些区别,我这里也懒得修改了。css文件都是独立出来的,可以自行修改样式。

源码
  源码我依然打为一个完整的包,包含了demo文件。需部署在PHP环境中。

  猛戳这里下载:http://files.cnblogs.com/lvdabao/uploadAdapter.zip

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统