layui.upload -图片/文件上传

最新推荐文章于 2024-08-13 13:56:54 发布

Kingsaj

最新推荐文章于 2024-08-13 13:56:54 发布

阅读量1.2k

点赞数 1

分类专栏： layui 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44412840/article/details/111361875

版权

layui 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!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">&#xe67c;</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>