webuploader上传

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

我个人比较喜欢这个上传插件。

文档地址：http://fex.baidu.com/webuploader/

插件整合项目里面，使用的是0.1.5版本，一共制作了三个关于webuploader插件的示例。

使用按钮形式上传单张和多张图片。
![](/uploads/images/20211231/f38ec285f244ea5a3516ced0b63da8c8.png)

另外两个示例来源于webuploader官方demo，这里结合模板对相关内容进行调整和修改。您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此示例。
![](/uploads/images/20211231/c7e62f81989535286df3b2cc9c81a31f.png)

还有一个是附件上传，跟图片上传大致上一样，就不截图了。

插件项目中页面名字：`test_webuploader.html` `test_webuploader_attachment.html` `test_webuploader_images.html` `test_webuploader_v4.html` `test_webuploader_attachment_v4.html` `test_webuploader_images_v4.html`

[点击查看 webuploader上传 在线演示](http://example.itshubao.com/example/107.html "点击查看 webuploader上传 在线演示")

[点击查看 webuploader可拖放上传图片 在线演示](http://example.itshubao.com/example/153.html "点击查看 webuploader可拖放上传图片 在线演示")

[点击查看 webuploader可拖放上传附件 在线演示](http://example.itshubao.com/example/152.html "点击查看 webuploader可拖放上传附件 在线演示")

涉及的文件：
- `js/webuploader/webuploader.css`
- `js/webuploader/webuploader.min.js`
- `js/magnific-popup/magnific-popup.min.css`
- `js/magnific-popup/jquery.magnific-popup.min.js`

> 其中 magnific-popup 插件主要是按钮方式上传时候最放大查看用的。