<!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>
原文地址：https://www.cnblogs.com/longtimetxl/p/11132018.html
时间： 2024-12-20 15:24:00