♙ 背景
- 最近开发新项目的后台,需要上传多张图片的功能,并且使用的是
Layui
前端框架,在整合效果的过程中,也是费了好多时间,在此稍作记录,希望能帮到各位道友!谢谢…
✄ 操作步骤
- 本文,主要展示核心的操作代码,当然注意是在引入
layui.css
、layui.js
的前提下(赘述一番)
① 首先,展示一下效果:
②. 局部 html
代码参考
- 首先展示一下核心代码:
<div class="layui-form-item">
<label class="layui-form-label">多图列表:</label>
<div class="layui-upload layui-input-block">
<button type="button" class="layui-btn" id="btn_multiple_upload_img">多图上传</button>
<button type="button" class="layui-btn" id="btn_image_clear">清空多图</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" id="upload_image_list"></div>
<input type="hidden" name="images_str" class="upload_image_url" value="">
</blockquote>
</div>
</div>
- 注意其中的 一个
<input>
作为隐藏域,用于保存多图上传的资源数组,方便后期进行form
表单的提交)
③. 核心 js
代码参考
- 参考
layUI
官方文档,以及下面所作的部分解释,应该能看个八分懂吧 …
/**
* 多图上传按钮 监听事件
*/
layui.use(['upload'], function () {
var upload = layui.upload;
upload.render({
elem: '#btn_multiple_upload_img'
,url: image_upload_url //改成您自己的上传接口
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#upload_image_list').append('<img style="height: 66px;margin-left: 7px" src="'+ result +'" title="单击删除" οnclick="delMultipleImgs(this)" class="layui-upload-img">');
});
}
,done: function(res){
//上传完毕
if (res.status == 1) {
var last_url = $(".upload_image_url").val();
var upload_image_url = "";
if(last_url){
upload_image_url = last_url+","+res.data.url;
}else {
upload_image_url = res.data.url;
}
$(".upload_image_url").val(upload_image_url);
}else {
dialog.tip(res.message);
}
}
});
});
/**
* 多图清除按钮点击事件
*/
$("#btn_image_clear").click(function () {
$('#upload_image_list').html("");
$(".upload_image_url").val('');
});
/**
* 多图上传的单击删除操作
* @param this_img
*/
function delMultipleImgs(this_img) {
//获取下标
var subscript = $("#upload_image_list img").index(this_img);
multiple_images = $('.upload_image_url').val().split(",");
//删除图片
this_img.remove();
//删除数组
multiple_images.splice(subscript, 1);
$('.upload_image_url').val(multiple_images);
};
④. 补充参考 PHP
后台上传图片资源的代码
- 毕竟本小白是个PHPer,语言都是相通的,不要太纠结.
<?php
namespace app\api\Controller;
use think\Request;
class Upload
{
/**
* 单一图片的上传操作
* @param Request $request
*/
public function img_file(Request $request)
{
$status = 0;
$data = [];
if ($request->Method()== 'POST') {
$file = $request->file('file');
// 移动到框架应用根目录/upload/ 目录下
$info = $file->move('upload');
if ($info){
//把反斜杠(\)替换成斜杠(/) 因为在windows下上传路是反斜杠径
$getSaveName=str_replace("\\","/",$info->getSaveName());
$fileUrl = '/upload/'.$getSaveName;
$status = 1;
$data['url'] = $fileUrl;
$message = '上传成功';
}else{
$message = "上传失败 ".$file->getError();
}
} else {
$message = "参数错误";
}
return showMsg($status, $message,$data);
}
}
♖ 附录
- 1.多多动手,实际操作一下就会发现,没啥难的,就分个好不好看而已…
- 2.
对于可能在使用是出现点击失效的情况
,请参考如下图所示:
- 3.展示一下鄙人编辑页的核心处理代码,方便对比使用