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

Posted 2021-03-28 ZABBIX应用

         公司使用的工单系统使用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

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

运行效果如下图：