thinkphp整合uploadify，单图片上传+预览

用户头像上传并预览，简洁实用的头像上传功能。
网上找了半天头像上传程序，没发现好用的，要么不兼容某些浏览器，要么功能不符合要求。查找相关资料后，发现thinkphp整合uploadify能满足我项目的需求。

动手整起，
首先，下载jquery.uploadify插件（最新版是3.2.1），把里面的jquery.uploadify.min.js放置到项目JS目录中，还有样式文件uploadify.css也放到项目CSS目录中，把uploadify.swf文件放置到随意目录，稍后正确引用即可。
第二步，在模板中引用以上JS和CSS文件（当然，jquery库文件也是必不可少的），在head区写入以下代码：<script><br /> $(function() {<br /> $(&#039;#file_upload&#039;).uploadify({<br /> &#039;swf&#039; : &#039;/Public/js/uploadify.swf&#039;,<br /> &#039;uploader&#039; : &#039;/Index/uploadify&#039;,<br /> &#039;buttonText&#039; : &#039;上传头像&#039;,<br /> &#039;onUploadSuccess&#039; : function(file, data, response) {<br /> $(&#039;#image&#039;).attr(&#039;src&#039;,&#039;/Public/images/130_&#039;+data);<br /> $(&#039;#pic&#039;).val(data);<br /> },<br /> });<br /> });<br /> </script>这一步，实际上直接复制插件中的uploadify.php中的代码到控制中也是能接收图片并上传的，但不太好使（比如没有重命名、不能生成多张规格图片等），所以我控制器直接用了Thinkphp的方法，还有要解释下，onUploadSuccess方法是在文件上传成功后执行的方法，我这里是把默认显示的图片的src替换掉，以实时显示预览图，并且由于上传图片只是把图片传上去了，但并没有更新数据库，所以要把图片名赋给一个隐藏表单，在点击保存时再更新数据库。（这样做似乎不科学，但我想不出更好的办法了）
第三步：public function uploadify()<br> {<br>     if (!empty($_FILES)) {<br>         import("@.ORG.UploadFile");<br>         $upload = new \Org\UploadFile();<br>         $upload->maxSize = 2048000;<br>         $upload->allowExts = array('jpg','jpeg','gif','png');<br>         $upload->savePath = "./Public/images/";<br>         $upload->thumb = true; //设置缩略图<br>         $upload->imageClassPath = "@.ORG.Image";<br>         $upload->thumbPrefix = "130_,75_,24_"; //生成多张缩略图<br>         $upload->thumbMaxWidth = "130,75,24";<br>         $upload->thumbMaxHeight = "130,75,24";<br>         $upload->saveRule = uniqid; //上传规则<br>         $upload->thumbRemoveOrigin = true; //删除原图<br> <br>         if(!$upload->upload()){<br>             $this->error($upload->getErrorMsg());//获取失败信息<br>         } else {<br>             $info = $upload->getUploadFileInfo();//获取成功信息<br>         }<br>         echo $info[0]['savename'];    //返回文件名给JS作回调用<br>     }<br> }第四步，接着，构建如下HTML代码：<div> <img alt="thinkphp整合uploadify，单图片上传+预览" ><br>     <div><input></div> <br> </div>显示效果如下：

点击图片下方的上传头像，图片马上就上传到指定服务器目录，并且把缩略图给显示出来。

本程序有个弊端：如果用户不停地点击上传，会造成服务器上图片泛滥。。因为只有最后一次上传的才会保存入数据库，其他的都是废的了，而现在没有解决之。（提供一个思路：用户头像上传的时候，把用户ID作为图片名称前缀或后缀，以此来判断图片是否有用）
还有就是，上传成功后会有个complete的提示，我没有做处理，这个可以屏蔽掉的，如果不需要（需要的话可以自己定义样式）。

还有人说那个上传按钮不好看，可以用图片替换（buttonImage='xxx.png'），我反而觉得用图片替换更不好看。实际上这个是可以修改uploadify.css实现的，看我上面的上传按钮（提示：按钮的宽度和高度可以修改jquery.uploadify.min.js来实现，搜索"120"能找到[因为默认宽度是120]，稍有基础就能看懂的）。

还有，这个插件是支持多图片上传的，不过我目前还没动手做，稍后几天可能会用到，到时再看如何修改。
有问题请跟帖，我会关注的。一起探讨与挖掘这个插件的强大之处！

AD：真正免费，域名+虚机+企业邮箱=0元