Uploadify · TP5常用代码

【jQuery无刷新上传插件Uploadify】 [TOC] ## 插件描述：上传功能在我们的程序中是经常会用到的，而传统的http上传在安全性和文件大小上都会有一定的限制，而且不能看到上传进度。所以就出现了采用Flash和其他一些方式来实现人性化的上传效果。那么今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -Uploadify，他有免费版和收费版两种，免费版的是用Flash实现的，而收费版的是用html5实现的 Uploadify是一个jQuery插件，可以轻松地添加多个文件上传功能到网站。两个不同的版本（HTML5和Flash）让您可以灵活地选择合适的实现为您的网站和后备方法使其优雅地降级。 ## 使用步骤 ### 1、下载 Uploadify压缩包 ### 2、解压文件，将以下的文件复制到自己的网站中 > browse-btn.png jquery.uploadify.min.js uploadify.css uploadify.swf uploadify-cancel.png ### 3、引入以下js和css文件 ``` <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script> ``` ### 4、在页面中添加一个file文本框 ``` <input type="file" name="file_upload" id="file_upload"> ``` ### 5、加入以下代码初始化插件 ``` //头像上传 Uploadify 插件 $('#face').uploadify({ swf : PUBLIC + '/Uploadify/uploadify.swf', //引入Uploadify核心Flash文件 uploader : uploadUrl, //PHP处理脚本地址 width : 120, //上传按钮宽度 height : 30, //上传按钮高度 buttonImage : PUBLIC + '/Uploadify/browse-btn.png', //上传按钮背景图地址 fileTypeDesc : 'Image File', //选择文件提示文字 fileTypeExts : '*.jpeg; *.jpg; *.png; *.gif', //允许选择的文件类型 formData : {'session_id' : sid}, //上传成功后的回调函数 onUploadSuccess : function (file, data, response) { eval('var data = ' + data); if (data.status) { $('#face-img').attr('src', ROOT + '/Uploads/Face/' + data.path.max); $('input[name=face180]').val(data.path.max); $('input[name=face80]').val(data.path.medium); $('input[name=face50]').val(data.path.mini); } else { alert(data.msg); } } }); ``` 其中 swf 为 uploadify.swf 文件的路径 uploader 为后台处理程序的路径其它的参数大家可以参考文档在此我就不做讲述了整个html文件类似下面的代码 ``` <title> My Uploadify Implementation </title> <link rel="stylesheet" type="text/css" href="uploadify.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script> <script type="text/javascript"> $(function() { $('#file_upload').uploadify({ 'swf' : 'uploadify.swf', 'uploader' : 'uploadify.php' // Your options here }); }); </script> <script type='text/javascript'> var address = "{$user.location}"; var constellation = "{$user.constellation}"; var PUBLIC = '__PUBLIC__'; var uploadUrl = '{:U("Common/uploadFace")}'; var sid = '{:session_id()}'; var ROOT = '__ROOT__'; </script> <input type="file" name="file_upload" id="file_upload"> ``` ### 6、后台处理 ``` /** * 头像上传 */ Public function uploadFace () { if (!$this->isPost()) { halt('页面不存在'); } $upload = $this->_upload('Face', '180,80,50', '180,80,50'); echo json_encode($upload); } ``` ``` /** * 图片上传处理 * @param [String] $path [保存文件夹名称] * @param [String] $width [缩略图宽度多个用，号分隔] * @param [String] $height [缩略图高度多个用，号分隔(要与宽度一一对应)] * @return [Array] [图片上传信息] */ Private function _upload ($path, $width, $height) { import('ORG.Net.UploadFile'); //引入ThinkPHP文件上传类 $obj = new UploadFile(); //实例化上传类 $obj->maxSize = C('UPLOAD_MAX_SIZE'); //图片最大上传大小 $obj->savePath = C('UPLOAD_PATH') . $path . '/'; //图片保存路径 $obj->saveRule = 'uniqid'; //保存文件名 $obj->uploadReplace = true; //覆盖同名文件 $obj->allowExts = C('UPLOAD_EXTS'); //允许上传文件的后缀名 $obj->thumb = true; //生成缩略图 $obj->thumbMaxWidth = $width; //缩略图宽度 $obj->thumbMaxHeight = $height; //缩略图高度 $obj->thumbPrefix = 'max_,medium_,mini_'; //缩略图后缀名 $obj->thumbPath = $obj->savePath . date('Y_m') . '/'; //缩略图保存图径 $obj->thumbRemoveOrigin = true; //删除原图 $obj->autoSub = true; //使用子目录保存文件 $obj->subType = 'date'; //使用日期为子目录名称 $obj->dateFormat = 'Y_m'; //使用年_月形式 if (!$obj->upload()) { return array('status' => 0, 'msg' => $obj->getErrorMsg()); } else { $info = $obj->getUploadFileInfo(); $pic = explode('/', $info[0]['savename']); return array( 'status' => 1, 'path' => array( 'max' => $pic[0] . '/max_' . $pic[1], 'medium' => $pic[0] . '/medium_' . $pic[1], 'mini' => $pic[0] . '/mini_' . $pic[1] ) ); } } ``` ### 7、配置文件 ``` <?php return array( //图片上传 'UPLOAD_MAX_SIZE' => 2000000, //最大上传大小 'UPLOAD_PATH' => './Uploads/', //文件上传保存路径 'UPLOAD_EXTS' => array('jpg', 'jpeg', 'gif', 'png'), //允许上传文件的后缀 ); ?> ``` ### 8、修改用户头像（后台处理） ``` /** * 修改用户头像 */ Public function editFace () { if (!$this->isPost()) { halt('页面不存在'); } $db = M('userinfo'); $where = array('uid' => session('uid')); $field = array('face50', 'face80', 'face180'); $old = $db->where($where)->field($field)->find(); if ($db->where($where)->save($_POST)) { if (!empty($old['face180'])) { @unlink('./Uploads/Face/' . $old['face180']); @unlink('./Uploads/Face/' . $old['face80']); @unlink('./Uploads/Face/' . $old['face50']); } $this->success('修改成功', U('index')); } else { $this->error('修改失败，请重试...'); } } ``` ## 下载地址优秀的jQuery无刷新上传插件Uploadify http://www.jq22.com/jquery-info103 ThinkPHP整合Uploadify插件实现异步上传图片 https://m.aliyun.com/yunqi/ziliao/23990?spm=5176.11156470.0.0.1b5b28c8kKSDzh