ThinkPHP整合Uploadify插件实现异步上传图片
1、首先到官网下载Uploadify插件。
2、在页面引入uploadify.css、jquery.uploadify.min.js。当然你得先把jquery引入。
3、配置uploadify：
| 代码如下 | 复制代码 |
<script type="text/javascript"> $(function () { var sid = '{:session_id()}'; $('#file_upload').uploadify({ formData : {'session_id' : sid}, swf : '__PUBLIC__/uploadify/uploadify.swf', uploader : "{:U(MODULE_NAME . '/' . CONTROLLER_NAME . '/uploadify')}", buttonText : '教师图片上传', fileTypeExt : '*.png;*.jpeg;*.jpg;*.gif;', fileTypeDesc : '选择图片', onUploadSuccess : function(file, data, response) { var src = '__ROOT__/Uploads/' data; $('#img').attr('src', src); $('#pic').val(src); } }); }); </script> | |
上传处理的地址就是uploadify方法，由于JS对上传文件的限制，上传文件不能做到异步上传。所以这里我把返回图片的地址赋值给一个隐藏的表单然后在用异步提交到数据库，有更好的方法的童鞋请在下方留言。
4、处理上传图片的方法代码：
| 代码如下 | 复制代码 |
| //图像上传处理 public function uploadify() { if (!empty($_FILES)) { //图片上传设置 $config = array( 'maxSize' => 3145728, 'savePath' => '', 'saveName' => array('uniqid',''), 'exts' => array('jpg', 'gif', 'png', 'jpeg'), 'autoSub' => true, 'subName' => array('date','Ymd'), ); $upload = new ThinkUpload($config);// 实例化上传类 $info = $upload->upload(); if(!$info) { //上传错误提示信息 $this->error($upload->getError()); } else { foreach($info as $file){ echo $file['savepath'].$file['savename']; } } } } | |
PS：在根目录创建Uploads目录
HTML代码
| 代码如下 | 复制代码 |
| <img id="img" src="__PUBLIC__/Images/nopic.png" width="480" height="249" border="0" /><br> <span>上传图片尺寸建议为480*249</span><br> <input type="hidden" name="pic" id="pic"> <input id="file_upload" type="file" multiple="true" size="60" /> | |
对于出现302 error 的同学，是因为需要传递session值给uploadify。在配置uploadify的时候加上这一项就能解决了formData : {'session_id' : sid},当然得先定义var sid = '{:session_id()}';。希望对大家有所帮助！
您可能感兴趣的文章：
jQuery文件上传插件 Uploadify
JQuery上传插件Uploadify使用详解及错误处理
Jquery上传插件 uploadify v3.1使用说明
22个很棒的jQuery文件上传插件
Jquery uploadify图片上传插件无法上传的解决方法
codeigniter与swfupload整合解决方案
TinyMCE 新增本地图片上传功能
Jquery Uploadify多文件上传带进度条且传递自己的参数
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
php文件上传代码大全(实例分享)