html代码
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
<script type="text/javascript" src="/layui/layui.js"></script>
<div class="layui-upload">
<button type="button" class="layui-btn btnUploadImg" data-url="upload.html" id="test1">上传图片</button>
<div class="layui-upload-list">
<input type="hidden" id="input1" value="">
<img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;">
<p class="demoText"></p>
</div>
</div>
<div class="layui-upload">
<button type="button" class="layui-btn btnUploadImg" data-url="upload.html" id="test2">上传图片</button>
<div class="layui-upload-list">
<input type="hidden" id="input2" value="">
<img class="layui-upload-img" id="demo2" style="width: 100px;height: 100px;">
<p class="demoText"></p>
</div>
</div>
js代码
<script>
//多个图片上传
layui.use(['form', 'layer', 'upload'], function () {
var form = layui.form
, layer = layui.layer
, $ = layui.jquery
, upload = layui.upload;
var btnUpload = document.getElementsByClassName("btnUploadImg");
for (let i = 0; i < btnUpload.length; i++) {
// var dataUrl = $(btnUpload[i]).attr("data-url");
// var dataFile = $(btnUpload[i]).attr("data-file");
//普通图片上传
var uploadInst = upload.render({
elem: '#' + btnUpload[i].id
, url: '/pc/upload/upload'
, accept: "file"
// , exts: dataFile
, before: function (obj) {
var btnId = btnUpload[i].id;
var imgId = $("#" + btnId).siblings("div").find("img").attr("id");
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#' + imgId).attr('src', result); //图片链接(base64)
});
}
, done: function (res) {
if (res.code == 1) {
//上传成功
var btnId = btnUpload[i].id;
var inputId = $("#" + btnId).siblings("div").find("input[type='hidden']").attr("id");
layer.msg('上传成功', {icon: 6, time: 1000});
$("#" + inputId).val(res.src)
} else {
return layer.msg(res.msg, {icon: 5});
}
}
, error: function () {
//演示失败状态,并实现重传
var btnId = btnUpload[i].id;
var demoText = $("#" + btnId).siblings("div").find('p');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
}
});
//单个图片上传
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#thumb' //绑定元素
,url: "{:url('common/upload')}" //上传接口
,data:{use:'article_thumb'}
,done: function(res){
//上传完毕回调
if(res.code == 2) {
$('#demo1').attr('src',res.src);
$('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
} else {
layer.msg(res.msg);
}
}
,error: function(){
//请求异常回调
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
tp后台方法
public function upload()
{
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->validate(['size'=>102400,'ext'=>'jpeg,jpg,png,gif])->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
return json_encode(['code'=>1,'src'=>$info->getFilename()]);
}else{
// 上传失败获取错误信息
return json_encode(['code'=>0,'msg'=>$file->getError()]);
}
}
}
yii2后台方法
public function actionUpload()
{
if (Yii::$app->request->isPost) {
$file = UploadedFile::getInstanceByName('file');
$datefilename = date('Ymd');
$dir=Yii::getAlias('@webroot').'/upload/'.$datefilename .'/';
if(!file_exists($dir)) {
mkdir($dir,0777,true);
}
//获得文件扩展名
$temp_arr = explode(".", $file->name);
$file_ext = array_pop($temp_arr);
$file_ext = trim($file_ext);
$file_ext = strtolower($file_ext);
$new_file_name = date("YmdHis") . '_' . rand(10000, 99999) . '.' . $file_ext;
$name =Yii::getAlias('@webroot').'/upload/'.$datefilename .'/'.$new_file_name;
$status = $file->saveAs($name,true);
if($status){
$res = [
'src'=>'/upload/'.$datefilename .'/'.$new_file_name,
'code'=>1
];
}else{
$res =[
'code'=>0,
'msg'=>'上传失败!'
];
}
return json_encode($res);
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。