<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">標題</label>
<div class="layui-input-block">
<input id="title" type="text" name="title" maxlength="300" required lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">上傳文件</label>
<div class="layui-input-inline uploadHeadImage">
<div class="layui-upload-drag" id="uploadFile">
<i class="layui-icon"></i>
<p>點擊上傳文件，或將文件拖拽到此處！</p>
</div>
</div>
<div class="layui-input-inline">
<div id="uploadResult" class="layui-upload-list">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">備注</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="請輸入內容" maxlength="1000" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="uploadBtn">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
<script src="./jquery/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.use('upload', function() {
var upload = layui.upload;
//執行上傳
var uploadInst = upload.render({
elem: '#uploadFile', //綁定元素
url: '../FileUploadServer', //上傳接口
method: 'POST',
auto: false,
accept: 'file',
bindAction: '#uploadBtn',
size: 10240,//限制文件大小10M
multiple: false,
data:{},
before: function(obj) {
layer.load();
this.data.username= $('#username').val();// 紅色部分等同於 ajax 提交參數的效果 如 {"username":$("username").val()} 以此類推
},
done: function(data, index, upload) {//上傳完畢回調
layer.closeAll('loading');
if (data.no === 1) {
layer.msg("上傳成功！", {
icon: 6
});
} else {
layer.msg("上傳失敗，請稍后重試！", {
icon: 5
});
}
var uuid = data.uuid;
$("#uploadResult").append('<input readonly type="text" value="'+uuid+'" class="layui-input" />');
}
, error: function() {//請求異常回調
layer.closeAll('loading');
layer.msg('網絡異常，請稍后重試！');
}
});
});
</script>
</html>
Layer文件上傳同時傳遞表單數據
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。