layui-plugin
/
uploadx.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>附件上传</title>
		<link rel="stylesheet" href="layui/css/layui.css" />

	</head>
	<body>
		<form class="layui-form layui-form-pane" action="" style="width: 300px;height:400px;padding: 10px;border:1px solid #F0F0F0;margin: 40px auto;" lay-filter="example">
			 <input type="hidden" name="id" value="66" />
			 <div class="layui-form-item">
			    <label class="layui-form-label">单行输入框</label>
			    <div class="layui-input-block">
			      <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">验证必填项</label>
			    <div class="layui-input-block">
			      <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div id="up"></div>
			  <div id="up1"></div>
		</form>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.config({
			base: 'plugin/'
		}).use(['jquery', 'layer', 'uploadx','form','upload'], function() {
			var $ = layui.jquery,
				uploadx = layui.uploadx,
				upload = layui.upload,
				form = layui.form;
			// upload.render({
			//   elem: '#uploadx-container'
			//   ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			//   ,done: function(res){
			//   }
			// });
			uploadx.addExt({
				ext:'txt',
				type:'svg',
				icon:'<svg t="1629904039173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1280" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M192 0h448.1536L960 320v576c0 70.6944-57.3056 128-128 128H192C121.3056 1024 64 966.6944 64 896V128C64 57.3056 121.3056 0 192 0z" fill="#2696FF" p-id="1281"></path><path d="M417.7536 546.176h-60.8256v170.5728h-40.9216V546.176H256V512h161.7536v34.176z m94.3872 36.416L549.376 512h47.0528l-57.8304 101.5296 59.328 103.2192h-47.6032l-38.1824-71.7184-38.1952 71.7184h-47.6032l59.3408-103.2192L427.8528 512h47.0528l37.2352 70.592zM768 546.176h-60.8256v170.5728H666.24V546.176h-60.0064V512H768v34.176z" fill="#FFFFFF" opacity=".9" p-id="1282"></path><path d="M640 0l320 320H768c-70.6944 0-128-57.3056-128-128V0z" fill="#8FC6FE" p-id="1283"></path></svg>'
			});
			uploadx.addExt({
				ext:'json',
				type:'img',
				icon:'./icon/uploadx/javascript.png'
			});
			uploadx.render({
				ex:{
					elem:"#up",
					url:'./data/uploadx.json',//模拟请求
					biz:'biz1',//用于区别单个表单下若存在多个附件上传的功能，用于区别他们之间的内容。
					name:'文件上传',
					title:'up',
					form:'example',
					mainId:'id',//默认也是这个名字
                    down:function(file){
						console.log(file);
					},
					del:function(file){
						console.log(file);
					},
					upload:function(file){
						console.log(file);
					}
				}

				}
			});
			uploadx.render({
				ex:{
					elem:"#up1",
					url:'./data/uploadx2.json',//模拟请求
					biz:'biz2',//用于区别单个表单下若存在多个附件上传的功能，用于区别他们之间的内容。
					name:'文件上传2',
					title:'up2',
					form:'example',
					mainId:'id'//默认也是这个名字
				}
			});
			// if (PDFObject.supportsPDFs) {
			// 	// PDF嵌入到网页
			// 	PDFObject.embed("./file/SpringCloud.pdf", "#test");
			// } else {
			// 	// location.href = "/canvas";
			// }
			// XLSX.utils.sheet_to_json
			// var file  = new FileReader();
			// file.readAsText()

		});
	</script>
</html>