<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="${ctx}/layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="ImgPreview" style="height: 300px">
</div>
</blockquote>
</div>
<script src="${ctx}/layui/layui.all.js"></script>
<script>
;!function () {
//无需再执行layui.use()方法加载模块,直接使用即可
var form = layui.form
, layer = layui.layer,
element = layui.element;
element.init();
var $ = layui.jquery, upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#test2'
// , url: ${ctx} +'/upload'.
// , accept: 'file'
, multiple: true
// , exts: "${exts}"
, choose: function (obj) {
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
obj.preview(function (index, file, result) {
if (file.size > 0 && $('#ImgPreview').find('img').length === 0) {
$('#ImgPreview').empty();
}
// 添加图片 ImgPreview-预览的dom元素的id
$('#ImgPreview').append('<div style="float: left;margin-top: 10px;" class="image-container" id="container' + index + '">' +
'<div class="delete-css" >' +
'<button id="upload_img_' + index + '" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>' +
'</div>' +
'<img id="showImg' + index + '" style="width: 100px; height:100px;margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '">' +
'</div>');
//删除某图片
$("#upload_img_" + index).bind('click', function () {
delete files[index];
$("#container" + index).remove();
});
//某图片放大预览
$("#showImg" + index).bind('click', function () {
var width = $("#showImg" + index).width();
var height = $("#showImg" + index).height();
var scaleWH = width / height;
var bigH = 400;
var bigW = scaleWH * bigH;
if (bigW > 900) {
bigW = 900;
bigH = bigW / scaleWH;
}
// 放大预览图片
layer.open({
type: 1,
title: false,
closeBtn: 1,
shadeClose: true,
area: [bigW + 'px', bigH + 'px'], //宽高
content: "<img width='" + bigW + "' height='" + bigH + "' src=" + result + " />"
});
});
});
}
});
}();
</script>
<script>
var mm = function () {
alert("xxxx");
console.log("xxxx");
layer.msg('Hello World');
}
</script>
</body>
</html>
layui 文件上传
最新推荐文章于 2023-06-19 17:03:06 发布