From a158e0160517fe6d66b571858a7a2c18766b208a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= Date: Wed, 22 Feb 2017 13:23:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E4=BB=B6=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- application/admin/controller/Plugs.php | 85 ++++++------ application/admin/view/config.index.html | 10 +- application/admin/view/plugs.upfile.html | 159 +++++++++++++++++------ public/static/admin/listen.js | 8 +- 4 files changed, 171 insertions(+), 91 deletions(-) diff --git a/application/admin/controller/Plugs.php b/application/admin/controller/Plugs.php index dec36ad14..064b9d6d0 100644 --- a/application/admin/controller/Plugs.php +++ b/application/admin/controller/Plugs.php @@ -3,7 +3,9 @@ namespace app\admin\controller; use controller\BasicAdmin; +use library\Data; use library\File; +use think\Db; /** * 插件助手控制器 @@ -29,13 +31,14 @@ class Plugs extends BasicAdmin { /** * 文件上传 */ - public function upfile() { + public function upfile($mode = 'one') { $types = $this->request->get('type', 'jpg,png'); $field = $this->request->get('field', 'file'); $this->assign('field', $field); $this->assign('types', $types); $this->assign('mimes', File::getMine($types)); - $this->assign('uptype', ''); + $this->assign('uptype', sysconf('storage_type')); + $this->assign('mode', $mode); return view(); } @@ -43,10 +46,18 @@ class Plugs extends BasicAdmin { * 检查文件上传状态 */ public function upstate() { - $data = $this->request->post(); - - $this->result($data, 'IS_UPLOADED'); - $this->result($data, 'NOT_FOUND'); + $post = $this->request->post(); + $data = array(); + $data['uptype'] = $post['uptype']; + $data['file_url'] = date('Y/md') . "/{$post['md5']}." . pathinfo($post['filename'], 4); + $data['token'] = $this->_getQiniuToken($data['file_url']); + $data['server'] = url('admin/plugs/upload'); + $file = Db::name('SystemFile')->where(['uptype' => $post['uptype'], 'md5' => $post['md5']])->find(); + // 本地上传或文件不存在 + if (empty($file) || ($file['uptype'] === 'local' && !file_exists($file['full_path']))) { + return $this->result($data, 'NOT_FOUND'); + } + return $this->result($file, 'IS_FOUND'); } /** @@ -54,62 +65,52 @@ class Plugs extends BasicAdmin { * @param string $key * @return string */ - protected function _getToken($key) { - $accessKey = sysconf('qiniu_accesskey'); - $secretKey = sysconf('qiniu_secretkey'); - $bucket = sysconf('qiniu_bucket'); - $host = sysconf('qiniu_domain'); - $protocol = sysconf('qiniu_protocol'); + protected function _getQiniuToken($key) { + $accessKey = sysconf('storage_qiniu_access_key'); + $secretKey = sysconf('storage_qiniu_secret_key'); + $bucket = sysconf('storage_qiniu_bucket'); + $host = sysconf('storage_qiniu_domain'); + $protocol = sysconf('storage_qiniu_is_https') ? 'https' : 'http'; $time = time() + 3600; - if (empty($key)) { - exit('param error'); - } else { - $data = array( - "scope" => "{$bucket}:{$key}", - "deadline" => $time, - "returnBody" => "{\"data\":{\"site_url\":\"{$protocol}://{$host}/$(key)\",\"file_url\":\"$(key)\"}, \"code\": \"SUCCESS\"}", - ); - } + empty($key) && exit('param error'); + $params = [ + "scope" => "{$bucket}:{$key}", + "deadline" => $time, + "returnBody" => "{\"data\":{\"site_url\":\"{$protocol}://{$host}/$(key)\",\"file_url\":\"$(key)\"}, \"code\": \"SUCCESS\"}", + ]; $find = array('+', '/'); $replace = array('-', '_'); - $data = str_replace($find, $replace, base64_encode(json_encode($data))); + $data = str_replace($find, $replace, base64_encode(json_encode($params))); $sign = hash_hmac('sha1', $data, $secretKey, true); return $accessKey . ':' . str_replace($find, $replace, base64_encode($sign)) . ':' . $data; } /** - * 文件上传 + * 通用文件上传 * @return string */ public function upload() { - if (request()->isPost()) { - $filepath = 'upload/' . date('Y/md'); - $file = request()->file('file'); - $info = $file->move($filepath); - if ($info) { + if ($this->request->isPost()) { + $filepath = 'upload' . DS . date('Y/md'); + $file = $this->request->file('file'); + if (($info = $file->move($filepath))) { $data = []; $data['uptype'] = 'local'; - $data['md5'] = input('post.md5', $info->md5()); + $data['md5'] = $this->request->post('md5', $info->md5()); + $data['real_name'] = $info->getInfo('name'); $data['file_name'] = $info->getFilename(); -// $data['file_type'] = $info->getInfo('type'); $data['file_path'] = $info->getPathname(); $data['full_path'] = $info->getRealPath(); - $data['orig_name'] = $info->getInfo('name'); - $data['client_name'] = $info->getInfo('name'); $data['file_ext'] = $info->getExtension(); - $data['file_url'] = $filepath . '/' . $info->getSaveName(); - $data['site_url'] = pathinfo(request()->baseFile(true), PATHINFO_DIRNAME) . '/' . $data['file_url']; $data['file_size'] = $info->getSize(); - $data['create_by'] = get_user_id(); - Db::table('system_file')->insert($data); - return json(['code' => 'SUCCESS', 'data' => $data]); + $data['file_url'] = str_replace('\\', '/', $filepath . '/' . $info->getSaveName()); + $data['site_url'] = pathinfo($this->request->baseFile(true), PATHINFO_DIRNAME) . '/' . $data['file_url']; + $data['create_by'] = session('user.id'); + Data::save('SystemFile', $data, 'md5', ['uptype' => 'local']); + return json(['data' => $data, 'code' => 'SUCCESS']); } } - return json([]); - } - - public function upload() { - + return json(['code' => 'ERROR']); } /** diff --git a/application/admin/view/config.index.html b/application/admin/view/config.index.html index 8c9efb101..215181dad 100644 --- a/application/admin/view/config.index.html +++ b/application/admin/view/config.index.html @@ -95,7 +95,8 @@
- + + 上传图片
建议LOGO图片的尺寸为160x56px，此LOGO图片用于后台登陆页面。 @@ -104,10 +105,9 @@
- - - 上传图片 + + + 上传图片
建议上传ICO图标的尺寸为128x128px，此图标用于网站标题前，ICON在线制作。 diff --git a/application/admin/view/plugs.upfile.html b/application/admin/view/plugs.upfile.html index 6585010ac..0551103f2 100644 --- a/application/admin/view/plugs.upfile.html +++ b/application/admin/view/plugs.upfile.html @@ -26,6 +26,9 @@
+ {if $mode!=='one'} +
+ {/if}
开始上传
@@ -38,13 +41,43 @@ * @type Function */ function uploaded(ret, file) { - $('#' + file.id).attr('data-md5', file.md5).attr('data-src', ret.url || ret.site_url); + var url = ret.url || ret.site_url; + $('#' + file.id).attr('data-md5', file.md5).attr('data-src', url); + /* {if $mode === 'one'} */ top.$('[name="{$field}"]').map(function () { - top.$(this).attr('data-srcs', ret.url).attr('data-md5', file.md5).val(ret.url || ret.site_url).trigger('change'); + top.$(this).attr('data-srcs', ret.url).attr('data-md5', file.md5).val(url).trigger('change'); }); //top.$.msg.tips('文件上传成功！'); var index = top.layer.getFrameIndex(window.name); top.layer.close(index); + /* {/if} {$mode}*/ + } + + function confirmSelected() { + var srcs = new Array(); + var md5s = new Array(); + $('[data-md5] .success').map(function () { + var $li = $(this).parents('[data-md5]'); + md5s.push($li.attr('data-md5')); + srcs.push($li.attr('data-src')); + }); + if (srcs.length < 1) { + return top.$.msg.tips('还没有选择文件,请勾选需要使用的文件！'); + } + top.$('[name="{$field}"]').map(function () { + top.$(this).attr('data-srcs', srcs.join('|')).attr('data-md5', md5s.join('|')).val(srcs.join('|')).trigger('change'); + }); + var index = top.layer.getFrameIndex(window.name); + top.layer.close(index); + } + + function completed() { + var btnHTML = '完成上传'; + $('.uploadBtn').on('click', function () { + if (this.innerHTML === btnHTML) { + confirmSelected.call(this); + } + }).html(btnHTML); } // 当domReady的时候开始初始化 @@ -82,7 +115,7 @@ if (this.width != 1 || this.height != 1) { support = false; } - } + }; data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; }.call(this)), @@ -103,12 +136,10 @@ return parseFloat(version[ 0 ] + '.' + version[ 1 ], 10); })(), supportTransition = (function () { - var s = document.createElement('p').style, - r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; + var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), - /*WebUploader实例*/ uploader; if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) { /*flash 安装了但是版本过低*/ @@ -149,32 +180,20 @@ return; } - WebUploader.Uploader.register({ - 'before-send-file': 'preupload' - }, { - preupload: function (file) { + WebUploader.Uploader.register({'before-send-file': 'preupload'}, {preupload: function (file) { var me = this, owner = this.owner, deferred = WebUploader.Deferred(); owner.md5File(file.source).fail(function () { deferred.reject(); }).then(function (md5) { file.md5 = md5; - $.ajax("{:url('admin/plugs/upstate')}", { - dataType: 'json', - method: 'post', - data: { - id: file.id, - md5: md5, - uptype: '{$uptype}', - filename: file.name, - }, - success: function (ret) { - if (ret.code !== 'IS_UPLOADED') { - // 文件 + var data = {id: file.id, md5: md5, uptype: '{$uptype}', filename: file.name}; + $.ajax("{:url('admin/plugs/upstate')}", {dataType: 'json', method: 'post', data: data, success: function (ret) { + if (ret.code !== 'NOT_FOUND') { owner.skipFile(file); uploaded.call(uploader, ret.data, file); - console.log('文件秒传成功！file -> ' + file.name); - percentages[ file.id ] = [file.size, 1]; + percentages[file.id] = [file.size, 1]; updateTotalProgress(); + console.log('文件秒传成功 --> ' + file.name); } else { file.md5 = md5; file.token = ret.data.token; @@ -202,20 +221,27 @@ mimeTypes: '{$mimes}' }, formData: {}, + /*{if $mode === 'one'}*/ + fileNumLimit: 1, auto: true, + /* {else /} */ + auto: false, + fileNumLimit: 300, + /* {/if} */ compress: false, dnd: '#dndArea', paste: document.body, swf: '__STATIC__/plugs/uploader/Uploader.swf', chunked: false, chunkSize: 512 * 1024, - server: '{"plugs/file/upload"|url}', + server: '{:url("admin/plugs/upload")}', disableGlobalDnd: true, - fileNumLimit: 1, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 200 * 1024 * 1024 // 200 M }); + + /** * 处理上传后的结果 * @param {type} file @@ -233,7 +259,7 @@ uploader.on('dndAccept', function (items) { var denied = false, len = items.length; var unAllowed = 'text/plain;application/javascript '; - for (i = 0; i < len; i++) { + for (var i = 0; i < len; i++) { if (~unAllowed.indexOf(items[ i ].type)) { denied = true; break; @@ -241,6 +267,7 @@ } return !denied; }); + /* 上传开始前的处理 */ uploader.on('uploadBeforeSend', function (file, data, header) { header['X_Requested_With'] = 'XMLHttpRequest'; @@ -250,6 +277,12 @@ data['token'] = file.file.token; }); + // 添加“添加文件”的按钮， + uploader.addButton({ + id: '#filePicker2', + label: '继续添加' + }); + uploader.on('ready', function () { window.uploader = uploader; }); @@ -268,6 +301,7 @@ $wrap = $li.find('p.imgWrap'), $info = $('

'), showError = function (code) { + var text = ''; switch (code) { case 'exceed_size': text = '文件大小超出'; @@ -296,11 +330,7 @@ img = $(''); $wrap.empty().append(img); } else { - $.ajax('{"plugs/file/preview"|url}', { - method: 'POST', - data: src, - dataType: 'json' - }).done(function (response) { + $.ajax('{"plugs/file/preview"|url}', {method: 'POST', data: src, dataType: 'json'}).done(function (response) { if (response.result) { img = $(''); $wrap.empty().append(img); @@ -363,12 +393,7 @@ } if (supportTransition) { deg = 'rotate(' + file.rotation + 'deg)'; - $wrap.css({ - '-webkit-transform': deg, - '-mos-transform': deg, - '-o-transform': deg, - 'transform': deg - }); + $wrap.css({'-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg}); } else { $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); } @@ -432,11 +457,13 @@ break; case 'ready': $placeHolder.addClass('element-invisible'); + $('#filePicker2').removeClass('element-invisible'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': + $('#filePicker2').addClass('element-invisible'); $progress.show(); $upload.text('暂停上传'); break; @@ -446,6 +473,7 @@ break; case 'confirm': $progress.hide(); + $('#filePicker2').removeClass('element-invisible'); $upload.text('开始上传'); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { @@ -456,7 +484,7 @@ case 'finish': stats = uploader.getStats(); if (stats.successNum) { - //completed.call(this); + completed.call(this); } else { // 没有成功的文件，重设 state = 'done'; @@ -467,6 +495,58 @@ updateStatus(); } +// function setState(val) { +// var file, stats; +// if (val === state) { +// return; +// } +// $upload.removeClass('state-' + state); +// $upload.addClass('state-' + val); +// state = val; +// switch (state) { +// case 'pedding': +// $placeHolder.removeClass('element-invisible'); +// $queue.hide(); +// $statusBar.addClass('element-invisible'); +// uploader.refresh(); +// break; +// case 'ready': +// $placeHolder.addClass('element-invisible'); +// $queue.show(); +// $statusBar.removeClass('element-invisible'); +// uploader.refresh(); +// break; +// case 'uploading': +// $progress.show(); +// $upload.text('暂停上传'); +// break; +// case 'paused': +// $progress.show(); +// $upload.text('继续上传'); +// break; +// case 'confirm': +// $progress.hide(); +// $upload.text('开始上传'); +// stats = uploader.getStats(); +// if (stats.successNum && !stats.uploadFailNum) { +// setState('finish'); +// return; +// } +// break; +// case 'finish': +// stats = uploader.getStats(); +// if (stats.successNum) { +// completed.call(this); +// } else { +// // 没有成功的文件，重设 +// state = 'done'; +// location.reload(); +// } +// break; +// } +// updateStatus(); +// } + uploader.onUploadProgress = function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); $percent.css('width', percentage * 100 + '%'); @@ -497,7 +577,6 @@ }; uploader.on('all', function (type) { - var stats; switch (type) { case 'uploadFinished': setState('confirm'); diff --git a/public/static/admin/listen.js b/public/static/admin/listen.js index 096400bd0..15317e588 100644 --- a/public/static/admin/listen.js +++ b/public/static/admin/listen.js @@ -75,10 +75,10 @@ define(['jquery', 'admin.plugs'], function () { this.$body.on('click', '[data-file]', function () { var type = $(this).attr('data-type') || 'jpg,png'; var field = $(this).attr('data-field') || 'file'; - var method = $(this).attr('data-one') ? 'one' : 'index'; - var title = $(this).attr('data-title') || '文件管理'; - var uptype = $(this).attr('data-uptype') || 'qiniu'; - var url = window.ROOT_URL + '/index.php/admin/plugs/upfile/' + method + '.html?uptype=' + uptype + '&type=' + type + '&field=' + field; + var method = $(this).attr('data-file') === 'one' ? 'one' : 'mtl'; + var title = $(this).attr('data-title') || '文件上传'; + var uptype = $(this).attr('data-uptype') || 'local'; + var url = window.ROOT_URL + '/index.php/admin/plugs/upfile/mode/' + method + '.html?uptype=' + uptype + '&type=' + type + '&field=' + field; $.form.iframe(url, title || '文件管理'); });