layui上传照片
项目需要上传照片的功能 并且还需要带参数过去 所以我就在官方文档里找了哈 代码都有的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>upload模块快速使用</title>
<link href="~/layui-v2.2.45/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>xxx上传</legend>
</fieldset>
<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="demo2"></div>
</blockquote>
</div>
<input type="hidden" id="aa" name="xxxx" value="@ViewBag.xxxx" />
<script src="~/layui-v2.2.45/layui/layui.js"></script>
<script>
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload; //特别注意 这里的两个参数必须要 不然的话 js会报错 一开始没注意 找了好久
upload.render({
elem: '#test2'
, accept:"file"
, url: 'xxxx?batchnumber=' + $("#aa").val()
, multiple: true
, before: function (obj) {
//预读本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" width="50px" height="50px" alt="' + file.name + '" class="layui-upload-img">')
});
}
, Alldone: function (res) { //done是单个上传完就执行回调 Alldone是全部上传完了才执行回调 后面才发现 入了一个很大的坑
if (res) {
window.parent.location.reload();//刷新父级页面
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}
}
});
});
</script>
</body>
</html>
后台用常规的方法接受就行了
对于我这种菜鸟程序员来说 今天收获很大 哈哈哈
