項目需要上傳照片的功能 並且還需要帶參數過去 所以我就在官方文檔里找了哈 代碼都有的
<!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>
后台用常規的方法接受就行了
對於我這種菜鳥程序員來說 今天收獲很大 哈哈哈