thinkcmf 的图片上传
这个图片上传非常方便,通用于手机和PC.今天来记录一下它的运作流程!
1.页面
引用thinkcmf做好的 js: public/static/js 中的admin.js 或 frontend.js
然后在须要上传的地方加上代码:
//单张上传
<input type="hidden" name="thumb" id="thumbnail" value="{$check.thumb|default=''}">
<a href="javascript:uploadOneImage('图片上传','#thumbnail');">
<img src="{:cmf_get_image_preview_url($check.thumb)}"
id="thumbnail-preview"
width="135" style="cursor: pointer"/>
</a>
//多张上传
<ul id="photos_trade" class="pic-list list-unstyled form-inline">
<li> <a href="{:cmf_get_image_preview_url($pics['url'])}">
<img src="{:cmf_get_image_preview_url($pics['url'])}"
id="thumbnail-preview_$pics['url']"
width="135" style="cursor: pointer"/></a></li>
</ul>
<a href="javascript:uploadMultiImage('图片上传','#photos_trade','photos-item-tpl');"
class="btn btn-success btn-sm">选择图片</a>
//多张上传的js部分
<script type="text/html" id="photos-item-tpl">
<li id="saved-image{id}">
<input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
<input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
style="width: 200px;" title="图片名称">
<img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
onclick="imagePreviewDialog(this.src);">
<a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
<a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
</li>
</script>
只须要两个 a标签来执行方法就可以了。
uploadOneImage(‘图片上传’,’#thumbnail’);
uploadMultiImage(‘图片上传’,’#photos_trade’,‘photos-item-tpl-trade’);
- admin.js 、frontend.js中 对应的两个方法 及其调用方法打开选择对话框
/**
* 单个图片上传
* @param dialog_title 上传对话框标题
* @param input_selector 图片容器
* @param extra_params 额外参数,object
* @param app 应用名,CMF的应用名
*/
function uploadOneImage(dialog_title, input_selector, extra_params, app) {
openUploadDialog(dialog_title, function (dialog, files) {
$(input_selector).val(files[0].filepath);
$(input_selector + '-preview').attr('src', files[0].preview_url);
$(input_selector + '-name').val(files[0].name);
}, extra_params, 0, 'image', app);
}
/**
* 多图上传
* @param dialog_title 上传对话框标题
* @param container_selector 图片容器
* @param item_tpl_wrapper_id 单个图片html模板容器id
* @param extra_params 额外参数,object
* @param app 应用名,CMF 的应用名
*/
function uploadMultiImage(dialog_title, container_selector, item_tpl_wrapper_id, extra_params, app) {
openUploadDialog(dialog_title, function (dialog, files) {
var tpl = $('#' + item_tpl_wrapper_id).html();
var html = '';
$.each(files, function (i, item) {
var itemtpl = tpl;
itemtpl = itemtpl.replace(/\{id\}/g, item.id);
itemtpl = itemtpl.replace(/\{url\}/g, item.url);
itemtpl = itemtpl.replace(/\{preview_url\}/g, item.preview_url);
itemtpl = itemtpl.replace(/\{filepath\}/g, item.filepath);
itemtpl = itemtpl.replace(/\{name\}/g, item.name);
html += itemtpl;
});
$(container_selector).append(html);
}, extra_params, 1, 'image', app);
}
/**
* 打开文件上传对话框
* @param dialog_title 对话框标题
* @param callback 回调方法,参数有(当前dialog对象,选择的文件数组,你设置的extra_params)
* @param extra_params 额外参数,object
* @param multi 是否可以多选
* @param filetype 文件类型,image,video,audio,file
* @param app 应用名,CMF的应用名
*/
function openUploadDialog(dialog_title, callback, extra_params, multi, filetype, app) {
Wind.css('artDialog');
multi = multi ? 1 : 0;
filetype = filetype ? filetype : 'image';
app = app ? app : GV.APP;
var params = '&multi=' + multi + '&filetype=' + filetype + '&app=' + app;
Wind.use("artDialog", "iframeTools", function () {
art.dialog.open(GV.ROOT + 'user/Asset/webuploader?' + params, {
title: dialog_title,
id: new Date().getTime(),
width: '600px',
height: '350px',
lock: true,
fixed: true,
background: "#CCCCCC",
opacity: 0,
ok: function () {
if (typeof callback == 'function') {
var iframewindow = this.iframe.contentWindow;
var files = iframewindow.get_selected_files();
console.log(files);
if (files && files.length > 0) {
callback.apply(this, [this, files, extra_params]);
} else {
return false;
}
}
},
cancel: true
});
});
}
- 在打开的对话框后,art.dialog.open(GV.ROOT + ‘user/Asset/webuploader?’ + params, 指向了php中的方法user/Asset/webuploader ,其中又分上传前检查和上传两部分
if ($this->request->isPost()) {
$uploader = new Upload();
//new Upload()去上传了
$result = $uploader->upload();
if ($result === false) {
$this->error($uploader->getError());
} else {
$this->success("上传成功!", '', $result);
}
} else {
//上传前检查
$uploadSetting = cmf_get_upload_setting();
$arrFileTypes = [
'image' => ['title' => 'Image files', 'extensions' => $uploadSetting['file_types']['image']['extensions']],
'video' => ['title' => 'Video files', 'extensions' => $uploadSetting['file_types']['video']['extensions']],
'audio' => ['title' => 'Audio files', 'extensions' => $uploadSetting['file_types']['audio']['extensions']],
'file' => ['title' => 'Custom files', 'extensions' => $uploadSetting['file_types']['file']['extensions']]
];
$arrData = $this->request->param();
if (empty($arrData["filetype"])) {
$arrData["filetype"] = "image";
}
$fileType = $arrData["filetype"];
if (array_key_exists($arrData["filetype"], $arrFileTypes)) {
$extensions = $uploadSetting['file_types'][$arrData["filetype"]]['extensions'];
$fileTypeUploadMaxFileSize = $uploadSetting['file_types'][$fileType]['upload_max_filesize'];
} else {
$this->error('上传文件类型配置错误!');
}
View::share('filetype', $arrData["filetype"]);
View::share('extensions', $extensions);
View::share('upload_max_filesize', $fileTypeUploadMaxFileSize * 1024);
View::share('upload_max_filesize_mb', intval($fileTypeUploadMaxFileSize / 1024));
$maxFiles = intval($uploadSetting['max_files']);
$maxFiles = empty($maxFiles) ? 20 : $maxFiles;
$chunkSize = intval($uploadSetting['chunk_size']);
$chunkSize = empty($chunkSize) ? 512 : $chunkSize;
View::share('max_files', $arrData["multi"] ? $maxFiles : 1);
View::share('chunk_size', $chunkSize); 单位KB
View::share('multi', $arrData["multi"]);
View::share('app', $arrData["app"]);
$content = hook_one('fetch_upload_view');
$tabs = ['local', 'url', 'cloud'];
$tab = !empty($arrData['tab']) && in_array($arrData['tab'], $tabs) ? $arrData['tab'] : 'local';
if (!empty($content)) {
$this->assign('has_cloud_storage', true);
}
if (!empty($content) && $tab == 'cloud') {
return $content;
}
$tab = $tab == 'cloud' ? 'local' : $tab;
$this->assign('tab', $tab);
return $this->fetch(":webuploader");
}
5。最后到cmf\lib\Upload 中的Upload.php中实现上传