WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS
6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。整体功能很强大,支持各种回调函数,方便扩展自己的UI设计。
引入资源
WebUploader实现文件上传,只需要引入3种资源:JS, CSS, SWF(swf文件会自动载入,只要你目录正确).
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
Html部分
首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。
<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>
初始化Web Uploader
上面是最简单的引入,如果不出意外的话,应该可以上传文件,如果还不可以的话,直接在官网查看教程-----------------------分割线-----------------------
在PC
端测试的时候,没有问题,但是在移动端上传的时候,在选择文件的时默认是打开系统照相机,这个反人类的设计着实不好用!仔细审查了一下源代码,原来是在input
上面设置了如下属性capture=camera
,用编辑器打开
webupload.js
大概
4926
行,注释掉如下代码:
然后在手机端测试,发现出现了多个菜单选择如下图: