首先需要先下载Webuploader
官网下载:点击下载
webuploader-demo的css和js下载
webuploader初始化
<!--引入css和js【这里必须引入bootstrap】-->
<link href="{__ADMIN_PATH}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="{__ADMIN_PATH}css/animate.css" rel="stylesheet">
<link href="{__ADMIN_PATH}css/font-awesome.css?v=4.4.0" rel="stylesheet">
<script src="{__ADMIN_PATH}js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" type="text/css" href="{__PLUG_PATH}webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="{__ADMIN_PATH}css/webuploader-demo.css">
<!-- Web Uploader 引入你的webupload -->
<script type="text/javascript">
var ul="{__PLUG_PATH}";
// 添加全局站点信息
var BASE_URL = ul+'webuploader'; //webupload 地址
var up_load="{:url('admin/common/Webploader')}" //图片上传地址
var val_id="imageurl"; //存储上传图片的ID
</script>
<script src="{__PLUG_PATH}webuploader/webuploader.min.js"></script>
<script src="{__ADMIN_PATH}js/webuploader-demo.js"></script>
页面html代码
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div class="page-container">
<div id="uploader" class="wu-example">
<input type="hidden" id="{$imageurl}" name="{$name}" class="layui-input" lay-verify="{$verify}" lay-reqText="请先上传图片" style="width: 100%"> <!--存放图片路径-->
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将照片拖到这里,单次最多可选300张</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
图片上传代码
/**
* @return string
* webuploader 上传图片
*/
public function imgupload()
{
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.'images');
if($info){
// 成功上传后 获取上传信息
// 输出 jpg
$data['path']=str_replace('\\',"/","/uploads/".$info->getSaveName());
return json_encode($data['path']);//把路径ajax用json方式返回到视图中
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}