多文件上传功能实现 - 积分获取系统 - 常规

<!DOCTYPE html>
<html>
 <head>
 <meta charset='UTF-8' />
 <meta name='viewport' content='width=device-width' />
 <title>获取积分</title>
 <link rel='stylesheet' href='https://cdn.staticfile.org/layui/2.7.6/css/layui.css' type='text/css' />
 <script type='text/javascript' src='https://cdn.staticfile.org/layui/2.7.6/layui.js'>
 </script>
 <script type='text/javascript' src='http://api.csjy119.cn/alioss-web-uploader.min.js'>
 </script>
 <style type='text/css'>
.imgbgSubpage{
 position: fixed;
 left: 0;
 display: block;
 width: 100vw;
 height: 100vh;
 z-index: 0;
}
.tipTitle{
 width: 94%;
 margin: 1% 3%;
 position: relative;
 font-size:16px;
 color: #fff;
 z-index: 1;
 font-weight:bold;
}
.tipContent{
 width: 94%;
 margin: 1% 3%;
 position: relative;
 z-index: 1;
 font-size: 16px;
 color: #fff;
}



.layui-input-block {
 margin-left: 10px !important;
 margin-right: 10px !important;
 min-height: 36px;
}
 </style>
<script type='text/javascript'>
let $ = layui.jquery;
let id = -1;
let token = '';
let url = '';
let title='';
let file_size = '';
let types = '';

//let pdata = {id,cate,url,title,file_size,types,integral};
function guid()
{
 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
 return v.toString(16);
 });
}
function trigerUpload()
{
 return new Promise((resolve)=>{
 let input=document.createElement('input');
 input.setAttribute('type', 'file');
 input.setAttribute('multiple', 'multiple');;
 input.accept = 'doc,docx,png,jpg,jpeg,ppt,pptx,pdf,xls,xlsx,zip,rar';
 input.addEventListener('change',(e)=>{
 resolve(e);
 })
 input.click();
 });
}
</script>
 </head>
 <body style='min-height:100vh;'>
 <img class='imgbgSubpage' src='https://tadeng.oss-cn-chengdu.aliyuncs.com/storage/d4d7a735b238fba2f8de1d5c3e64d9e3_651638940b8c0.jpeg'/>
<div id='win' style='display:none' class='layui-progress layui-progress-big' lay-showPercent='yes' lay-filter='progressBar'>
 <div class='layui-progress-bar layui-bg-red' lay-percent='0%'></div>
</div>
<form class='layui-form' action='' style='padding-top:40px'>
 <div class='layui-form-item' style='position:relative;margin-right:20px;'  id='myupload'>
 <div style='position:absolute;line-height:36px;width:38px;top:1px;right:1px;color:rgba(67, 153, 228, 1);'>
 <i class='layui-icon layui-icon-upload'></i>
 </div>
 <input type='text'  placeholder='点击选择文件上传' autocomplete='off' class='layui-input' style='border-radius:6px;margin-left:10px;margin-right:10px;display:block' readonly>
 </div>
 <div class='layui-form-item'>
 <div class='layui-input-block' id='theFileNameWill' style='display:none;color:white'>
 </div>
 </div>
 <div class='layui-form-item'>
 <div class='layui-input-block'>
 <input type='text' name='integral' required  lay-verify='required' placeholder='其他人需要多少积分才能下载该文档' autocomplete='off' class='layui-input' style='border-radius:6px'>
 </div>
 </div>
 <div class='layui-form-item'>
 <div class='layui-input-block'>
 <select name='cate' lay-verify='required'>
  <option value='0'>暂不选择分类</option>
  <option value='22'>主题教育</option>
  <option value='24'>消防宣传</option>
  <option value='23'>管酒治酒</option>
  <option value='1'>战训相关</option>
  <option value='34'>└ └ 器材装备</option>
  <option value='19'>作战训练安全</option>
  <option value='8'>年终检查（含述职报告）</option>
  <option value='10'>└ └ 述职报告</option>
  <option value='12'>政工人事党建</option>
  <option value='18'>└ └ 党建</option>
  <option value='35'>└ └ 民主生活会</option>
  <option value='21'>队伍组织教育</option>
  <option value='27'>└ └ 荣誉观专题教育</option>
  <option value='37'>职业鉴定题库</option>
  <option value='17'>其他</option>
  </select>
 </div>
 </div>
 <div class='layui-form-item'>
 <div class='layui-input-block'>
 <button class='layui-btn layui-btn-radius' style='background:rgba(67, 153, 228, 1);width:100%' lay-submit lay-filter='formDemo'>立即上传</button>
 </div>
 </div>
</form>
<div class='tipTitle'>
 <i class='layui-icon layui-icon-auz'></i>
文件上传要求如下
</div>
<div class='tipContent'>
 <p>通知！！！资源库积分兑换开启！</p>
<p style='margin-top: 10px;'>&nbsp;</p>
<p>10积分=1Y阿消商城无门槛券 可用于阿消商城全场商品无门槛抵扣</p>
<p>目前可兑换5Y（50积分）、10Y（100积分）、20Y（200积分）、50Y（500积分）、100Y（1000积分）、200Y（2000积分）、500Y（5000积分）无门槛券</p>
<p>需要兑换请扫码联系客服！</p>
<p style='margin-top: 10px;'>&nbsp;</p>
<p>-----</p>
<p style='margin-top: 10px;'>&nbsp;</p>
<p>上传文件被下载可持续获得积分！文件上传要求：</p>
<p>2、禁止涉密文件、盗用和侵权文件<br>3、禁止显示具体单位或人名<br>4、文件标题要清晰<br>5、禁止资源库已有的相似内容</p>
</div>
<script>
//Demo
layui.use(['form','element'], function(){
 let form = layui.form;
 let element = layui.element;
 element.init();
 // element.progress('progressBar',percent  + '%');
 
$('#myupload').on('click',function(){
 trigerUpload().then((e)=>{ 
 let fileTarget = e.target;
 console.log(fileTarget.files);
 let files = fileTarget.files;
 if(!files)
 {
 return;
 }
 for(let i = 0; i < files.length; i++){
 let file = files[i];
 let name = file.name;
 $.post('/newapi/upload/checkFileName',{filename:name},function(theCheckResult){
 if(theCheckResult.code==1)
 {
 layer.msg('已有重复文件,请重新选择文件上传!');
 return;
 }
 url = '';
 types = '';
 title = '';
 file_size = '';
 $('#theFileNameWill').hide();

 let theLayerId = layer.open({ 
 type: 1,
 title: name,
 area:'350px',
 skin: 'layui-layer-molv',
 closeBtn: 0,
 content: $(`
 <div style='display:flex;flex-direction:column;align-items:center'>
 <div style='display:flex;width:100%;justify-content:space-between;align-items:center;padding:10px'>
 <span>${name}</span>
 <div id='win-${i}' style='display:none' class='layui-progress layui-progress-big' lay-showPercent='yes' lay-filter='progressBar'>
 <div class='layui-progress-bar layui-bg-red' lay-percent='0%'></div>
 </div>
 </div>
 </div>
 `) //这里content是一个普通的String
 });
 let type = name.substring(name.lastIndexOf('.') + 1);
 let theResPath = 'newresource/'+type+'/file/'+guid()+'.'+type;
 let zuiZhongUrl = 'https://orangerescue2022.oss-cn-hangzhou.aliyuncs.com/'+theResPath;

 let  clientOssMy = new AliOSSWebUploader({
 region:'oss-cn-hangzhou',
 bucket:'orangerescue2022',
 accessKeyId:'LTAI4GHj9F8tUTscSh8qLuGT',
 accessKeySecret: 'a3GW1PyyFY7GMp7L5zK39Iwyg2SQCa',
 timeout:6000000,
 });

 let optionsOss = {
 'x-oss-object-acl': 'public-read',
 onProgress: ee=>{
 let nowPercent = ee.percent.toFixed(2); 
 element.progress(`progressBar-${i}`,nowPercent  + '%');
 },
 onSuccess: ()=>{ 
 file_size = file.size;
 title = name;
 types = type;
 url = '/api/'+theResPath;
 $(`#theFileNameWill`).html('您要上传的文档是:'+title);
 $(`#theFileNameWill`).show();
 layer.close(theLayerId);
 console.log(zuiZhongUrl);
 },
 onError: (ee) =>  { 
 url = '';
 types = '';
 title = '';
 file_size = '';
 layer.alert(ee); 
 }
 };
 let  uploaderOssNow = clientOssMy.postObject(theResPath, file, optionsOss);    
 });
 }
 });

});
 //监听提交
 form.on('submit(formDemo)', function(data){
 if(url=='')
 {
 return layer.msg('请先上传文件');
 }
 let pdata = data.field;
 pdata.url = url;
 pdata.types = types;
 pdata.title = title;
 pdata.file_size = file_size;
 pdata.id = id;
 $.ajax({
 url: '/common/upload/filesOss',
 data:pdata,
 type: 'post',
 // 设置头部属性
 beforeSend: function(request) {
 request.setRequestHeader('token', token);
 },
 success: function (theUpRes) {
 if(theUpRes.code!=200)
 {
 console.log(theUpRes);
 layer.alert('上传失败');
 return;
 }
 layer.msg('上传成功');
 setTimeout(function(){
 location.reload();
 },2000);
 }
 });
 return false;
 });
});
</script>
 </body>
</html>