LayUI 多图上传操作实例参考

局部 html 代码参考
注意下面的第一行代码：

<input type="hidden" name="slide_show" class="multiple_show_img" value="">
1
此 <input> 作为隐藏域，用于保存多图上传的资源数组，方便后期进行 form 表单的提交

<input type="hidden" name="slide_show" class="multiple_show_img" value="">
<div class="layui-form-item">
<label class="layui-form-label">轮播图片：</label>
<div class="layui-upload">
<button type="button" class="layui-btn" id="multiple_img_upload">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览：
<div class="layui-upload-list" id="div-slide_show"></div>
</blockquote>
</div>
</div>

核心 js 代码参考
参考 layUI 官方文档，以及下面所作的部分解释，应该能看个八分懂吧 …
//多图容器【注册全局变量】
var multiple_images = [];
layui.use(‘upload’, function () {
var upload = layui.upload;
//多图片上传
upload.render({
elem: ‘#multiple_img_upload’
,url: ‘/api/upload/img_file’
,multiple: true
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$(‘#div-slide_show’).append(‘<img src="'+ result +'" alt="'+ file.name +'" title="点击删除" class="layui-upload-img" οnclick="delMultipleImgs(this)">‘)
});
}
,done: function(res){
//如果上传成功
if (res.status == 1) {
//追加图片成功追加文件名至图片容器
multiple_images.push(res.data.url);
$(‘.multiple_show_img’).val(multiple_images);
}else {
//提示信息
dialog.tip(res.message);
}
}
});

});
//单击图片删除图片 【注册全局函数】
function delMultipleImgs(this_img){
    //获取下标
    var subscript=$("#div-slide_show img").index(this_img);
    //删除图片
    this_img.remove();
    //删除数组
    multiple_images.splice(subscript, 1);
    //重新排序
    multiple_images.sort();
    $('.multiple_show_img').val(multiple_images);
    //console.log("multiple_images",multiple_images);
    //返回
    return ;
}

补充参考 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);
}

}

相关文章