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

苏南大叔:如何实现浏览器兼容的文件上传功能?webuploader基本使用方式 - webuploader-hero
如何实现浏览器兼容的文件上传功能?webuploader基本使用方式(图2-1)

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

webuploader代码

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

webuploader官网:

苏南大叔:如何实现浏览器兼容的文件上传功能?webuploader基本使用方式 - webuploader-www
如何实现浏览器兼容的文件上传功能?webuploader基本使用方式(图2-2)

webuploadergithub上的主页(有后端demo):

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

webuploader基本使用方式

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

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

  • 第一步,前端引入cssjs,然后初始化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文件,都不是推荐使用的,大家不必研究了。

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:

<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事件非常多。所以,苏南大叔会另开文章描述这部分内容,大家也可以参考官方的文档:

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

uploader.upload();

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

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

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   php    webuploader

本站的忠实读者小伙伴,正在阅读下面这些文章: