博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5+flash打造兼容各浏览器的文件上传方案
阅读量:5877 次
发布时间:2019-06-19

本文共 1437 字,大约阅读时间需要 4 分钟。

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

  1. <input type="file' />标签的multiple属性
  2. File和FileList API
  3. XMLHttpRequest2的upload和onprogress
  4. FormData

  就拿File来讲,IE9都不支持,所以在当前环境下IE系列浏览器几乎无法使用。因此做一个兼容方案还是有必要的。如何做兼容呢?这不是废话,忘了你的H5版uploadify是怎么来的了?我们可以在不支持这些特性的浏览器上运行flash版的uploadify。

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

  1. 写一个适配器,用来检测客户端浏览器对HTML5的这些特性的支持程度
  2. 如果支持,则动态加载HTML5版本的插件所需的js和css文件,调用H5版本的插件
  3. 如果不支持,动态加载flash版本的插件所需的js和css文件,调用flash版本的插件

  我给适配器命名为uploadAdapter,这样一来,我们的文件结构应该变成了这样:

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

使用方法

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

  在调用的时候,我们直接使用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

截图

  下面分别是flash版和HTML5版的截图:

                      flash版

                     HTML5版

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

源码

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

  猛戳这里下载:

  同样,若在使用中发现了bug或有其他建议,欢迎留言~

转载地址:http://zczix.baihongyu.com/

你可能感兴趣的文章
Spark RDD、DataFrame原理及操作详解
查看>>
程序计数器、反汇编工具
查看>>
Android N: jack server failed
查看>>
007-Shell test 命令,[],[[]]
查看>>
关于Linux系统使用遇到的问题-1:vi 打开只读(readonly)文件如何退出保存?
查看>>
pandas 按照某一列进行排序
查看>>
在WPF中如何使用RelativeSource绑定
查看>>
Map的深浅拷贝的探究
查看>>
XSLT语法 在.net中使用XSLT转换xml文档示例
查看>>
如何将lotus 通讯簿导入到outlook 2003中
查看>>
WinForm 应用程序中开启新的进程及控制
查看>>
前端工程师的职业发展路线在哪?
查看>>
IOS 内存警告 Memory warning level
查看>>
[转]PAC Manager: Ubuntu 上强大的 SSH 帐号管理工具,可取代 SecureCRT_Miracle_百度空间...
查看>>
顺序容器 (2)string类型操作
查看>>
转载:我最近的研究成果(IGeometry.Project and IGeometry.SpatialReference)
查看>>
提示框
查看>>
HDOJ1233 畅通工程之一(最小生成树-Kruscal)
查看>>
14Spring_AOP编程(AspectJ)_环绕通知
查看>>
PHP之打开文件
查看>>