上传图片插件我们这里选用的是比较出名的jQuery File Upload插件，Github地址为：

 

　　Demo在这里：这里我们选用该插件的基础功能，也就是Base版本。

 

　　后台处理图片上传程序，我们选择Thinkphp框架，也是国内非常热门的框架之一。

 

　　框架整合

 

　　先看下jquery插件下载下来后的目录文件：

 

　　这一堆文件里面，我们只需要取出js文件夹中的jquery.fileupload.js，jquery.iframe-transport.js，jquery.ui.widget.js和css文件夹中的jquery.fileupload.css即可。

 

　　在thinkphp框架的Public目录中新建css，js，img，uploads文件夹用来分别存储对应的文件。其中img文件夹需要放一张图片添加按钮图片。

 

　　uploads文件夹放置的是上传的图片目录

 

　　下面资源整合功能就大功告成了。

 

　　页面建立

 

　　单张图片应用一般在文章封面图上传，或者文章中插入图片等等。比如segemntfault的这里：

 

　　新建页面

 

　　首先在Thinkphp控制器文件夹新建IndexController.class.php，然后新建一个add_img方法用来显示上传图片界面，并且完成view等文件的建立。

 

　　public function add_img（）

 

　　{

 

　　$this->display（）;

 

　　}

 

　　HTML

 

　　下面首先在html页面引入相关js，css资源

 

　　添加图片

 

　　这里要注意一下，除了需要引入必备的图片上传插件。还需要注意引入jquery文件。

 

　　接下来就我们就新建一个表单。

 

　　解释一下：

 

　　其中fileinput-button是十分重要的一个元素，不可缺少

 

　　其中的。thumbnail是一个用于放图片上传后显示缩略图的地方

 

　　其中的id="fileupload"则是浏览器默认的上传插件

 

　　最后的一个form-group中内元素为我们需要提交的附加信息，比如图片名称或者其他信息