layui.upload -图片/文件上传
程序员文章站
2022-04-07 21:00:31
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: #000;
color: #fff;
border: none;
height: 100%;
width: 100%;
overflow: hidden;
}
body{
height: 100%;
width: 100%;
/* 设置旋转元素的基点位置： */
transform-origin: left top 0;
background-image: url(http://192.168.31.113:8008/frame/assets/img/main-bg.jpg);
/* 将动画与 div 元素绑定： */
nimation: flymove 270s linear 1s infinite;
-webkit-animation: flymove 270s linear 1s infinite;
}
/* 创建动画 */
@-webkit-keyframes flymove {
0% {
background-position: 0; }
100% {
background-position: 200%; }
}
.layui-form-box,
.layui-input-block>.layui-textarea,
.layui-form-box>.layui-upload-drag {
background-color: #000;
filter: alpha(opacity=60);
background-color: rgba(0, 0, 0, .6);
color: #fff;
border: none;
}
.layui-form-box {
margin-top: 21px;
}
.layui-input-block>.layui-textarea,
.layui-form-box>.layui-upload-drag {
box-shadow: inset 0px -4px 9px 0px rgba(82, 255, 255, 0.45);
border: 1px solid rgba(82, 255, 255, 0.45);
}
.layui-input-block>.layui-textarea {
width: 90%;
}
</style>
</head>
<link rel="stylesheet" href="http://192.168.31.113:8008/frame/assets/libs/ajax/libs/layui2/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js"></script>
<body>
<input type="hidden" id="ipuFile" name="file" value="">
<div class="layui-form-item layui-form-text layui-form-box ">
<label class="layui-form-label">内容 : </label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" id="processContent" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text layui-form-box ">
<label class="layui-form-label">文件上传 : </label>
<div class="layui-upload-drag" id="uploadFile">
<div>
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
</div>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="/frame/assets/img/fileIcon.png" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
<div class="layui-form-item layui-form-text layui-form-box ">
<button type="button" style=" margin-left: 110px; display: none;" id="anewBtn" onclick="deleteUpload()" class="layui-btn">删除</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://192.168.31.113:8008/frame/assets/js/api.js"></script>
</body>
<script>
// 上传
layui.use('upload', function() {
var upload = layui.upload;
upload.render({
elem: '#uploadFile',
url: HTTP_ROOT_PATH + '/system/workerorder/uploadfile2' //改成您自己的上传接口
,
before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
layer.load(); //上传loading
},
done: function(res, index, upload) { //上传后的回调
layer.closeAll('loading'); //关闭loading
console.log(res, '服务器返回的数据res');
if (res.code == 0) {
console.log(res, 72);
$('#anewBtn').css('display', 'block');
//do something （比如将res返回的图片链接保存到表单的隐藏域）
// 显示成功状态
layer.msg('上传成功', {
time: 500
});
// 上传图片成功时,让img回显图片
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
} else {
layer.msg('上传失败!', {
time: 500
});
}
},
accept: 'file' //允许上传的文件类型
,
choose: function(obj) {
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
obj.preview(function(index, file, result) {
console.log(index, '得到文件索引'); //得到文件索引
console.log(file, '得到文件对象'); //得到文件对象
console.log(result, '得到文件base64编码'); //得到文件base64编码，比如图片
//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
//这里还可以做一些 append 文件列表 DOM 的操作
//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
});
},
multiple: false // 多文件上传
,
error: function(index, upload) {
layer.msg('服务器上传失败!');
//当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
layer.closeAll('loading'); //关闭loading
}
});
});
// 删除
function deleteUpload() {
layer.msg('确认要删除当前文件吗?', {
btn: ['确认', '取消'],
time: 20000, //2秒关闭（如果不配置，默认是3秒）
yes: function() {
$('#ipuFile').val('');
$('#uploadDemoView').addClass('layui-hide');
$('#anewBtn').css('display', 'none');
layer.msg('删除成功', {
time: 500
});
},
})
}
</script>
</html>