如何实现浏览器兼容的文件上传功能?webuploader基本使用方式
发布于 作者:苏南大叔 来源:程序如此灵动~苏南大叔来补充几篇很久之前就应该写的系列文章,那就是熊厂的webuploader
文件上传项目。这个代码是非常非常的好用啊,苏南大叔极力推荐大家使用这款webuploader
上传代码来做上传,可以解决很多很多上传的系列问题。比如一成不变的2M
大小限制问题,比如高大上的断点续传问题,这些都是webuploader
可以做到的高大上功能。
本文测试环境:mac
/chrome
/webuploader@0.1.5
/php
。
webuploader
代码
这里不得不重点强调一下:webuploader
是百度fex
前端团队的作品,那么对于他们来说,前端部分才是真正的kpi
。而上传这个动作,无疑是前端和后端通力合作的结果。所以,下载webuploader
代码的时候,一个非常非常重要的地方就是:下载github
上的master
代码。这份代码,是有常见后端语言的相关demo
的。否则,在官网上拿到的是仅仅前端部分的代码,后端逻辑还要自己一点一点补全。
webuploader
官网:
webuploader
在github
上的主页(有后端demo
):
webuploader
纯前端代码下载地址(没有后端demo
):
webuploader
基本使用方式
webuploader
的使用方式,还是很传统的,并不会像现在的react
或者vue
那么的前卫。webuploader
官方入门文档,可以点击下面这个链接:
总结上来说,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
文件,都不是推荐使用的,大家不必研究了。
webuploader.js | 完全版本 |
webuploader.min.js | min版本 |
webuploader.flashonly.js | 只有Flash实现的版本 |
webuploader.flashonly.min.js | min版本 |
webuploader.html5only.js | 只有Html5实现的版本 |
webuploader.html5only.min.js | min版本 |
webuploader.noimage.js | 去除图片处理的版本,包括HTML5和FLASH |
webuploader.noimage.min.js | min版本 |
webuploader.custom.js | 自定义打包方案,请查看 Gruntfile.js,满足移动端使用 |
webuploader.custom.min.js | min版本 |
当然,值得提醒的是:还有个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
的最简单使用方式,并没有设计到更多的变化。所以,还请关注苏南大叔的后续文字:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。