thinkphp整合uploadify单图片上传预览.docxVIP

精品字里行间 thinkphp整合uploadify，单图片上传+预览 用户头像上传并预览，简短实用的头像上传功能。 网上找了半天头像上传程序，没发现好用的，要么不兼容某些浏览器，要么功能不切合要求。查找有关资料后，发现thinkphp整合uploadify能知足我项目的需求。 着手整起， 首先，下载jquery.uploadify插件（最新版是），把里面的 jquery.uploadify.min.js放置到项目JS目录中，还有样式文件uploadify.css也放到项目CSS目录中，把uploadify.swf文件放置到任意目录，稍后正确引用 即可。 第二步，在模板中引用以上JS和CSS文件（自然，jquery库文件也是必不可少的），在head区写入以下代码： scripttype=text/javascript //图片上传 $(function( ){ 4. $(#file_upload).uploadify({ 5. swf :__PUBLIC__/js/uploadify.swf, 6. uploader:{:U(Public/uploadify)}, 7. buttonText:上传图片, 8. onUploadSuccess:function(file,data,response){ 9. $(#image).attr(src,__PUBLIC__/images/m_+data); 10. $(#pic).val(data); 11. }, 12. }); }); /script 这一步，实际上直接复制插件中的uploadify.php中的代码到控制中也是能接 收图片并上传的，但不太好使（比方没有重命名、不能生成多张规格图片等），所以我控制器直接用了Thinkphp的方法，还有要解释下，onUploadSuccess方法是在文件上传成功后履行的方法，我这里是把默认显示的图片的src替换掉，以实时显示预览图，并且由于上传图片只是把图片传上去了，但并没有更新数据 库，所以要把图片名赋给一个隐藏表单，在点击保留时再更新数据库。（这样做似乎不科学，但我想不出更好的办法了） 第三步： //图片上传实现 publicfunctionuploadify( ){ if(!empty($_FILES)){ import(ORG.Net.UploadFile); $upload=newUploadFile( );//实例化上传类 $upload-maxSize=2048000; 放心做自己想做的 精品字里行间 $upload-allowExts=array(jpg,jpeg,gif,png); $upload-savePath=./Public/images/; $upload-thumb=true;//设置缩略图 import(ORG.Util.Image); $upload-thumbPrefix=m_;//生成缩略图 $upload-thumbMaxWidth=425; $upload-thumbMaxHeight=300; $upload-saveRule=uniqid;//上传规则 $upload-thumbRemoveOrigin=true;//删除原图 if(!$upload-upload( )){ $this-error($upload-getErrorMsg( ));//获取失败信息 }else{ $info=$upload-getUploadFileInfo( );//获取成功信息 } echo$info[0][savename];//返回文件名给JS作回调用 } } 第四步，接着，建立如下HTML代码： imgid=imagesrc=__PUBLIC__/picupload.pngwidth=425height=300border=0/inputid=file_uploadname=file_uploadtype=filemultiple=truevalue=/ 显示效果如下： 点击图片下方的上传头像，图片马上就上传到指定服务器目录，并且把缩略图给 显示出来。 本程序有个缺点：如果用户不停地址击上传，会造成服务器上图片泛滥。。因为 只有最后一次上传的才会保留入数据库，其他的都是废的了，而现在没有解决之。 （提供一个思路：用户头像上传的时候，把用户ID作为图片名称前缀或后缀， 以此来判断图片是否有用） 还有就是，上传成功后会有个complete的提示，我没有做办理，这个能够障蔽掉的，如果不需要（需要的话能够自己定义样式）。 还有人说那个上传按钮不漂亮，能够用图片替换（buttonImage=xxx.png）， 我反而感觉用图片替换更不漂亮。实际上这个是能够改正uploadify.css实现 放心做自己想做的