LayUI 多图上传操作实例参考
最近开发新项目的后台，需要上传多张图片的功能，并且使用的是 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="单击删除" onclick="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，语言都是相通的，不要太纠结.
<?phpnamespace 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.多多动手，实际操作一下就会发现，没啥难的，就分个好不好看而已…
