【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