webuploader上传插件

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

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

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

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

这里使用的是0.1.5版本，模板里面没有单独使用页面来做示例，这里只是在新增文档页面中使用了上传，更多的示例请查看插件整合项目中的示例。（http://lyear.itshubao.com/v5/example/）

![](/uploads/images/20230107/b119e5a10113f4aba9dcb793fbe3120f.png)

模板页面：http://lyear.itshubao.com/v5/lyear_pages_add_doc.html

#### 插件整合项目

插件整合项目中做了单图上传和多图上传示例，并且也做了拖拽上传图片和文件两个示例

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

![](/uploads/images/20230107/b8a953132c5419bc08e5691d3351f50d.png)

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

插件项目中页面名字：`lyear_js_webuploader.html` `lyear_js_webuploader_attachment.html` `lyear_js_webuploader_images.html`

演示地址：http://lyear.itshubao.com/v5/example/

涉及的文件：
- `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 插件主要是按钮方式上传时候最放大查看用的。