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

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

webuploader代码

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

webuploader官网：

• http://fex.baidu.com/webuploader/

webuploader在github上的主页（有后端demo）：

• https://github.com/fex-team/webuploader

webuploader纯前端代码下载地址（没有后端demo）：

• http://fex.baidu.com/webuploader/download.html
• https://github.com/fex-team/webuploader/releases

webuploader基本使用方式

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

• http://fex.baidu.com/webuploader/getting-started.html

总结上来说，webuploader的使用方式非常好理解：

• 第一步，前端引入css和js，然后初始化webuploader对象，根据需求设置参数。
• 第二步，用户传递“上传的文件”给后端语言。
• 第三步，后端语言（自己根据demo修改）返回约定格式的json。
• 第四步，触发webuploader的相关js回调，改变上传页面的内容。

这里的难点在于：

• 前端参数设置（看文档！），回调函数。
• 后端语言处理（看github里面的demo!），返回约定的json数据。

引入类库文件

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

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入webuploader：

<link rel="stylesheet" type="text/css" href="<webuploader>/webuploader.css">
<script type="text/javascript" src="<webuploader>/webuploader.nolog.min.js"></script>

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

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

初始化webuploader

html:

<div id="uploader" class="wu-example">
   <div id="thelist" class="uploader-list"></div>
   <div class="btns">
       <div id="picker">选择文件</div>
       <button id="ctlBtn" class="btn btn-default">开始上传</button>
   </div>
</div>

js:

var uploader = WebUploader.create({
    swf: '../../dist/Uploader.swf',
    server: '<your_path>/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事件非常多。所以，苏南大叔会另开文章描述这部分内容，大家也可以参考官方的文档：

• http://fex.baidu.com/webuploader/doc/index.html
• http://fex.baidu.com/webuploader/document.html
• http://fex.baidu.com/webuploader/getting-started.html

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

uploader.upload();

对于auto:false的情况，这句话就可以触发上传啦。如果是auto:true，那么就选择完文件就可以直接上传，无需代码触发。

$("#ctlBtn").on("click",function(){
  uploader.upload();
});

总结

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

• https://newsn.net/tag/webuploader/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。