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

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

其中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或有其他建议，欢迎留言~