webupload兼容html4,如何实现浏览器兼容的文件上传功能？webuploader基本使用方式...

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

苏南大叔来补充几篇很久之前就应该写的系列文章，那就是熊厂的webuploader文件上传项目。这个代码是非常非常的好用啊，苏南大叔极力推荐大家使用这款webuploader上传代码来做上传，可以解决很多很多上传的系列问题。比如一成不变的2M大小限制问题，比如高大上的断点续传问题，这些都是webuploader可以做到的高大上功能。

如何实现浏览器兼容的文件上传功能？webuploader基本使用方式(图2-1)

本文测试环境：mac/chrome/webuploader@0.1.5/php。

webuploader代码

这里不得不重点强调一下：webuploader是百度fex前端团队的作品，那么对于他们来说，前端部分才是真正的kpi。而上传这个动作，无疑是前端和后端通力合作的结果。所以，下载webuploader代码的时候，一个非常非常重要的地方就是：下载github上的master代码。这份代码，是有常见后端语言的相关demo的。否则，在官网上拿到的是仅仅前端部分的代码，后端逻辑还要自己一点一点补全。

webuploader官网：

如何实现浏览器兼容的文件上传功能？webuploader基本使用方式(图2-2)

webuploader在github上的主页(有后端demo)：

webuploader纯前端代码下载地址(没有后端demo)：

webuploader基本使用方式

webuploader的使用方式，还是很传统的，并不会像现在的react或者vue那么的前卫。webuploader官方入门文档，可以点击下面这个链接：

总结上来说，webuploader的使用方式非常好理解：第一步，前端引入css和js，然后初始化webuploader对象，根据需求设置参数。

第二步，用户传递“上传的文件”给后端语言。

第三步，后端语言(自己根据demo修改)返回约定格式的json。

第四步，触发webuploader的相关js回调，改变上传页面的内容。

这里的难点在于：前端参数设置(看文档！)，回调函数。

后端语言处理(看github里面的demo!)，返回约定的json数据。

引入类库文件

webuploader基于jquery，所以需要引入jquery:

引入webuploader：

其中的webuploader.js文件，有很多的变数。官方推荐使用的是：webuploader.min.js。苏南大叔推荐使用的是：webuploader.nolog.min.js。其它的更多变化的webuploader.js文件，都不是推荐使用的，大家不必研究了。webuploader.js完全版本

webuploader.min.jsmin版本

webuploader.flashonly.js只有Flash实现的版本

webuploader.flashonly.min.jsmin版本

webuploader.html5only.js只有Html5实现的版本

webuploader.html5only.min.jsmin版本

webuploader.noimage.js去除图片处理的版本，包括HTML5和FLASH

webuploader.noimage.min.jsmin版本

webuploader.custom.js自定义打包方案，请查看 Gruntfile.js，满足移动端使用

webuploader.custom.min.jsmin版本

当然，值得提醒的是：还有个Uploader.swf是隐式调用的，调用方式可以参见下面的范例代码。(其实写错了也没事，大多数情况下，不会用到flash上传的)

初始化webuploader

html:

选择文件

开始上传

js:var uploader = WebUploader.create({

swf: '../../dist/Uploader.swf',

server: '/upload.php',

pick: '#picker',

auto: false,

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

resize: false

});

这个类初始化的地方，变数很多。这里，苏南大叔稍稍说明一下：Uploader.swf位置在哪里，就写上哪个位置，写相对路径也是可以的，不写或者写错了，其实也可以。因为大多数情况下，是不会触发flash的情况的，h5足够了。

upload.php，这个逻辑是自己实现的，github里面有demo。

pick，这个是html里面的上传按钮的元素id，这里可能会出现错位的情况，自己去定义css吧。而且uploader.swf文件，也应该隐藏的叠加在这个元素上哦。好好看css，进行调试吧。

auto，是否选择完文件，就自动上传，一般来说，个人认为：设置为true的话，比较合适。

resize，对于图片文件，在上传之前是否需要默认压缩一下。(也就是说可能会永久的损失一些质量)。这个选项，对于非图片的上传工作，是么有啥用的。

编写webuploader逻辑

这块的逻辑一般会写出大量js代码，各种on事件非常多。所以，苏南大叔会另开文章描述这部分内容，大家也可以参考官方的文档：

官方的getting-started，写的是云里雾里的。大家可以参考github上的examples目录里面的demo，更加容易些。总之，苏南大叔可以用一句话暂时总结这部分内容。那就是：uploader.upload();

对于auto:false的情况，这句话就可以触发上传啦。如果是auto:true，那么就选择完文件就可以直接上传，无需代码触发。$("#ctlBtn").on("click",function(){

uploader.upload();

});

总结

本文中，苏南大叔仅仅描述了webuploader的最简单使用方式，并没有设计到更多的变化。所以，还请关注苏南大叔的后续文字：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。