首页 >php教程 >php手册 >thinkphp整合uploadify,单图片上传 预览

thinkphp整合uploadify,单图片上传 预览

WBOY
WBOY原创
2016-06-07 11:41:401325浏览

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

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


thinkphp整合uploadify,单图片上传 预览显示效果如下:


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

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

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

还有,这个插件是支持多图片上传的,不过我目前还没动手做,稍后几天可能会用到,到时再看如何修改。

有问题请跟帖,我会关注的。一起探讨与挖掘这个插件的强大之处!

AD:真正免费,域名 虚机 企业邮箱=0元
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:修改thinkphp自带分页类支持bootstrap下一篇:黄永成老师thinkphp视频教程ueditor最新版本使用

相关文章

查看更多