上一篇文章介绍了HTML5版的文件上传插件,相比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,用来动态加载文件。这样所需的东西就全了。

使用方法

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

<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

截图

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

flash版

HTML5版

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

源码

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

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

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

HTML5+flash打造兼容各浏览器的文件上传方案的更多相关文章

  1. 百万行mysql数据库优化和10G大文件上传方案

    百万行mysql数据库优化和10G大文件上传方案 最近这几天正在忙这个优化的方案,一直没时间耍,忙碌了一段时间终于还是拿下了这个项目?项目中不要每次都把程序上的问题,让mysql数据库来承担,它只是个 ...

  2. 超大文件上传方案(PHP)

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  3. 求超大文件上传方案( Java )

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  4. 使用JS实现可断点续传的文件上传方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  5. 超大文件上传方案(B/S)

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  6. 超大文件上传方案( Java )

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  7. 超大文件上传方案(ASP.NET)

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  8. IE浏览器 AjaxForm文件上传错误:Stream ended unexpectedly

    错误日志: 1 org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet requ ...

  9. flask 文件上传(单文件上传、多文件上传)

    文件上传 在HTML中,渲染一个文件上传字段只需要将<input>标签的type属性设为file,即<input type=”file”>. 这会在浏览器中渲染成一个文件上传字 ...

随机推荐

  1. WebView网页中使用到支付宝调不起来,提示ERR_UNKNOWN_URL_SCHEME

    转载自:http://blog.csdn.net/u014369799/article/details/51305788 在WebView中如果使用到支付宝,需要添加以下代码,否则操作系统会将支付宝的 ...

  2. Python中的threading

    Python中的threading RLock--重入锁 RLock在Python中的实现是对Lock的封装,具体在类中维护了一个重入次数的变量.一旦一个线程获得一个RLock,该线程再次要求获得该锁 ...

  3. 原子操作--ARM架构

    说明:内核版本号为3.10.101 一.ARM架构中的原子操作实现 在原子操作(一)中我们已经提到,各个架构组织为“复仇者”联盟,统一了基本的原子变量操作,这里我们就拿atomic_dec(v)来看看 ...

  4. HTTP协议-----小白

    HTTP是一个属于应用层的面向对象的协议. ***OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 HTTP协议的主要特点可概括如下: ...

  5. Linux下修改mysql密码

    # /etc/init.d/mysql stop# mysqld_safe --user=mysql --skip-grant-tables --skip-networking &# mysq ...

  6. 《UML大战需求分析》阅读笔记6

    流程分析三剑客之总结 顺序图,活动图相类似表示活动,状态机图表示状态.分析特点: 顺序图: 强调角色之间的交互,信息明确: 从上到下,从左到右,按时间顺序: 不适合表达复杂特殊情况(循环分支,条件分支 ...

  7. Win7 64位 VS2015环境编译Libpng

    第3次编译Libpng依然想不起任何东西,为了不浪费第4次的时间... http://libmng.com/pub/png/libpng.html http://www.zlib.net/ 解压两个压 ...

  8. 【DP】组合数字

    Password Attacker 题意就是给 M 个关键字,组合成 N 字符长度的结果,每一个关键字都必须在 N 位的字符中出现,有多少种可能结果. 范围 1 ≤ M ≤ N ≤ 100. 举例假设 ...

  9. 我看见的第一个XCODE编译错误 - Command /applications.../clang failed with exit code 1

    开始用XCODE学习Apple相关开发的东东,写些demo熟悉Object C,一直还没看见什么问题,昨晚在家把一些demo上传到代码服务器,今天在另外一台机器上下载下来编译,出现了问题: Preco ...

  10. <Data Structure and Algorithm>排序算法

    排序稳定:如果两个数相同,对他们进行的排序结果为他们的相对顺序不变.例如A={1,2,1,2,1}这里排序之后是A = {1,1,1,2,2} 稳定就是排序后第一个1就是排序前的第一个1,第二个1就是 ...