vlambda博客
学习文章列表

升级plupload到3.1.6版使用HTML5上传文件

         公司使用的工单系统使用plupload(https://www.plupload.com/)的FLASH来上传有关文件,自chrome等浏览器最新升级后就不能使用,使得只得使用一些国产的浏览器来支持,个人对360等特别反感,也不愿搞一大堆浏览器,所以决定研究一下这个上传组件。

       经研究发现plupload从一开始就支持使用多种方式来上传文件,包括html5,html4,gear,flash等。开始我为了代码改动更少,想找到我们现在使用的版本,然后找对应版本的代码看是不是可以简单修改就可以使用Html5来达到目的,最终发现系统使用的是基于1.0.0 beta版的代码,但在github上已经无法下载到这个版本的代码了,所以我下载了1.0.0的代码,并将相关文件使用Beyond Compare与现在系统的相关文件进行对比,发现现在系统主要修改了jquery.plupload.queue.js代码,替换了默认的UI,采用jquery dialog ui的方式来提供文件浏览选取上传,较符合中国人的操作习惯,所以找到原来的代码:runtimes:'flash'修改为runtimes:'html5'。经反复跟踪调试了几天,发现较多问题依次修改最终UI能正常操作,但最终上传却始终无法正常完成(使用开发者工具始终无法看到上传的文件)。在接近崩溃的时候我测试了一下最新版3.1原生的功能,发生可以正常操作,所以对有关HTML5上传代码做了概要对比发现修改很大,基本可以确认1.0.0版本的代码在现在的浏览器上的应该已经无法运行,所以决定直接升级到最新版代码,有了前几天的调试经验,改为最新版代码发现最新版代码封装更好,实现了JQUERY UI与基础代码分离,所以经过简单的修改调试实现了与原代码兼容的接口,使无需修改原有JAVA服务端及HTML代码,只需简单替换plupload的javascript文件,顺利完成plupload升级。

开源代码:https://github.com/linwinfan/myplupload

使用示例文件:custom.html

没有提供服务器端示端,如有需要请留言。

运行效果如下图: