TP5实战群:316497602
单图上传截图:
多图上传截图:
如果想看TP内置图片与一些说请跳转:
http://www.thinkphp.cn/topic/51860.html
代码部分
注意: 本页面采用公有view. 也就是说add与edit使用一个html页面.至于默认值问题使用present进行判断
单图上传Html
<div class="layui-form-item item_picture_id ">
<label class="layui-form-label">分类图片</label>
<div class="">
<button type="button" class="layui-btn" id="pictureId">
<i class="layui-icon"></i>上传图片
</button>
<img src="{present name="info.img"}{$info.img}{/present}" width="150px;" height="150px;" id="img_picture_id" style="{present name="info.img"}display:block;{else/}display:none;{/present} float:left;">
<input class="attach" type="hidden" id="picture_id" name="img" value="{present name="info.img"}{$info.img}{/present}"/>
</div>
</div>多图上传html多图与单图一样都是使用present进行判断,是否有默认参数.
<div class="layui-tab-item">
<div class="layui-form-item item_figure">
<label class="layui-form-label">商品相册</label>
<dl class="">
<div id="wrapper">
<div id="container">
<div class="upload_photo">
<ul class="left">
{present name="goods_photos"}
{foreach $goods_photos as $img}
<li>
<div class="img_div">
<img src="{$img|cdn_img_url}" alt="" />
</div>
<div class="sort_div"><span class="jt_left">< </span><span class="jt_right">></span>
<input type="hidden" name="goods_imgs[]" value="{$img}" />
<div class="upload_delete">X</div>
</li>
{/foreach}
{/present}
</ul>
<div class="site-demo-upload">
<img id="LAY_demo_upload" src="__PUBLIC__/demo_img/timg.jpg" width="150px"height="184px">
<div class="site-demo-upbar">
<button type="button" class="layui-btn" id="figure_figure">
<i class="layui-icon"></i>上传图片
</button>
</div>
</div>
</div>
</div>
</dl>
</div>JS上传部分, 采用la#pictureId单图上传
#figure_figure多图上传,
layui.use('upload', function(){
var upload = layui.upload;
upload.render({
elem:"#pictureId" ,
url: "/admin/file/upload/uploadtype/picture/setpath/product.html" //上传接口
,done: function(res){ //上传成功后的回调
$("#img_picture_id").css('display','block');
$("#img_picture_id").attr('src',res['info']['url']);
$("#picture_id").attr("value",res['info']['url']);
}
});
var uploadInst = upload.render({
elem:"#figure_figure" ,
url: "/admin/file/upload/uploadtype/picture/setpath/mall.html" //上传接口
,done: function(res){ //上传成功后的回调
var upload_add = '<li><div class="img_div"><img src="' + res.info.url + '" alt=""></div><div class="sort_div"><span class="jt_left">< </span><span class="jt_right">></span><input type="hidden" name="goods_imgs[]" value="' + res.info.path + '"/></div><div class="upload_delete">X</div></li>';
$(".upload_photo ul").append(upload_add);
}
});
});
//此处为多图左右切换与删除.
$(function() {
//多图上传点击<>左右移动图片
$("body").on("click",".upload_photo ul li .jt_left",function(){
var li_index=$(this).closest("li").index();
if(li_index>=1){
$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
}
})
$("body").on("click",".upload_photo ul li .jt_right",function(){
var li_index=$(this).closest("li").index();
$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
})
//点击多图上传的X,删除当前的图片
$("body").on("click",".upload_delete",function(){
$(this).closest("li").remove();
})
})php上传部分. 此处没走提交. 属于在提交之前先把图片传到服务器回调路径config.php增加几个参数
// +----------------------------------------------------------------------
// | 附件上传
// +----------------------------------------------------------------------
'file_upload' => array(
// 允许上传的文件MiMe类型
'mimes' => [],
// 上传的文件大小限制 (0-不做限制)
'maxSize' => 2*1024*1024,
// 允许上传的文件后缀
'exts' => ['xlsx,xls'],
// 子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
'subName' => ['date', 'Y-m-d'],
//保存根路径
'rootPath' => './public/uploads/attachment',
// 保存路径
'savePath' => '',
// 上传文件命名规则，date,md5,sha1,自定义规则
'saveName' => 'uniqid',
// 文件上传驱动e,
'driver' => 'local',
),
'picture_upload' => array(
// 允许上传的文件MiMe类型
'mimes' => [],
// 上传的文件大小限制
'maxSize' => 2*1024*1024,
// 允许上传的文件后缀
'exts' => 'gif,jpg,jpeg,bmp,png',
// 子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
'subName' => ['date', 'Y-m-d'],
//保存根路径
'rootPath' => './public/uploads/picture',
// 保存路径
'savePath' => '',
// 上传文件命名规则，date,md5,sha1,自定义规则
'saveName' => 'uniqid',
// 文件上传驱动e,
'driver' => 'local',
),
'avatar_upload' => array(
// 允许上传的文件MiMe类型
'mimes' => [],
// 上传的文件大小限制
'maxSize' => 2*1024*1024,
// 允许上传的文件后缀
'exts' => 'gif,jpg,jpeg,bmp,png',
// 子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
'subName' => ['date', 'Y-m-d'],
//保存根路径
'rootPath' => './public/uploads/avatar',
// 保存路径
'savePath' => '',
// 上传文件命名规则，date,md5,sha1,自定义规则
'saveName' => 'uniqid',
// 文件上传驱动e,
'driver' => 'local',
),file.php是上传回调页面.多图与单图都走这里即可.毕竟多图也是一个个传的.namespace app\admin\controller;
use app\admin\controller\Base;
use app\admin\controller\Upload as UploadController;
use think\Loader;
use think\Config;
class File extends Base
{
function _initialize()
{
parent::_initialize();
// p($this->member_model);
// exit;
}
/**
* 上传
* @return [type] [description]
*/
public function upload()
{
$uploadtype = $this->param['uploadtype'];
$setpath = $this->param['setpath'];
$controller = new UploadController;
$return = $controller->upload($uploadtype,$setpath);
return json($return);
}
}upload.php是file.php请求页面, 也是上传页面. 上传执行完成回调路径给file.php再付给js. 通过js 再显示到html页面.namespace app\admin\controller;
use think\Request;
class Upload {
protected $request;
/**
* 架构函数
* @param Request $request Request对象
* @access public
*/
public function __construct()
{
$this->request = Request::instance();
$this->file_model = new File();
}
/**
* 上传控制器
*/
public function upload($uploadtype,$setpath) {
$upload_type = $uploadtype;
$setpath = $setpath;
$config = config($upload_type.'_upload');
$rootPath = $setpath!='picture' && $setpath ? './public/uploads/'.$setpath : $config['rootPath'];
$upload_path = $rootPath.'/'.call_user_func_array($config['subName'][0],[$config['subName'][1],time()]);
$file = $this->request->file('file');
$info = $file->validate(['size'=>$config['maxSize'],'ext'=>$config['exts']])->rule($config['saveName'])->move($upload_path, true, false);
if ($info) {
$upload_info = $this->parseFile($info);
$save_upload_name = $upload_info['path'];
//oss_uploadFile($save_upload_name);//存储到静态资源服务器
$return['status'] = 1;
$return['info'] = $upload_info;
} else {
$return['status'] = 0;
$return['info'] = $file->getError();
}
return $return;
}
protected function parseFile($info) {
$data['create_time'] = $info->getATime();
$data['basename'] = $info->getBasename();
//$data['c_time'] = $info->getCTime();
$data['ext'] = $info->getExtension();
$data['name'] = $info->getFilename();
$data['mime_type'] = strstr($info->getMime(),'/',true);
$data['savepath'] = $info->getPath();
$data['path'] = str_replace("\\", '/', substr($info->getPathname(), 1));
$data['url'] = config('oss_alias_url').$data['path'];
$data['size'] = $info->getSize();
$data['md5'] = md5_file($info->getPathname());
$data['sha1'] = sha1_file($info->getPathname());
return $data;
}
}代码部分完全结束 TP5实战群:316497602 最佳答案
