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()}';。希望对大家有所帮助！
时间： 2024-08-25 11:38:37