thinkCMF上传图片
1、要使用这个功能，首先要引入框架自带的admin.js或者frontend.js文件
再上传的地方添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| //单张上传
<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;"
οnclick="imagePreviewDialog(this.src);">
<a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
<a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
</li>
</script>
|
2、只须要两个 a标签来执行方法就可以了。
uploadOneImage(‘图片上传’,’#thumbnail’);
uploadMultiImage(‘图片上传’,’#photos_trade’,‘photos-item-tpl-trade’);
这两个方法在admin.js和另一个js文件都有。
3、紧接着会打开一个内嵌界面，然后art.dialog.open(GV.ROOT + ‘user/Asset/webuploader?’ + params, 指向了php中的方法user/Asset/webuploader，在webuploader里面有具体的上传方法，前面只是为了调用这个功能而已。
ps：若要单独分割这个上传图片或文件功能，只需将admin.js的;（function）里面的内容剪切出来放到一个新的js文件里面（里面也定义了选取时间的插件，一并取出来）和上传图片的方法，例如uploadOneImage()和openUploadDialog（）放到对应的应用界面，再将webloader的方法和html模板移到对应的地方即可。
