一.webuploader
webuploader主要用来做文件的上传，支持批量上传和图片预览，图片预览是将图片生成base64数据直接在标签中使用，所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍，可以上webuploader的官方网址看，我一直认为，看官网文档是学习最直接的途径。 webuploader官方网站，顺带一提，webuploader是由Baidu Fex Team团队进行维护的。
二. webuploader上传原理
1. PHP+HTML表单上传文件
在讲这个之前，需要先了解一下php的文件上传方式，上传分两个部分
先通过html创建表单，在表单中添加
<input type='file' name='xxx'>
的文件上传标签，点击上传的submit 按钮之后，就可以将文件上传到服务器了。
2. 到了服务器端，接收到的上传文件会被存储在php指定的临时文件夹中，利用PHP的内置函数move_uploaded_file()，就可以将临时文件移动到你想要的目标文件夹中，这个过程可以对文件进行改名、做大小判断是否符合条件等，这样上传就完成了。
完整的php表单上传案例，可以看w3school的这篇文章，这里就不累赘了。PHP+HTML表单上传文件
2. webuploader上传原理
使用php+html表单上传可以完成文件的上传工作，但是有缺点，
- 上传文件时必须提交整个页面，这样页面会被刷新
- 上传图片是没办法进行图片预览，所以有时候上传错了图片也要等到图片真正上传上去之后刷新了页面才知道。
webuploader解决了这两个问题，webuploader使用ajax技术提交表单，上传的时候不需要提交页面，可以利用事件监听机制监听上传的结果，在页面中做出反馈，而且还能做图片预览。使用webuploader上传图片，也只需要几步：
- 前台HTML页面配置webuploader
- 后台服务器PHP页面接受webuploader的上传图片，然后进行处理。
- 后台处理完图片返回json数据的结果给前台
- 前台接收后作出反馈。
这里说一点，后台PHP接收和处理图片其实和PHP+HTML表单上传基本是一样的。
三. webuploader的配置和使用
所有的配置参数和使用方法都可以查看官方文件。webuploader官方网站，在webuploader github仓库中有一些example案例可以参考。example
我的运行环境：php5.6+nginx+macOS
我的文件夹的目录
- index.php
- upload_img.php
- mywebupload.js
- webuploader/