yin_yu820
/
yd_qycpfb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
							<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<title class="title">[文件管理器]</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.content {background: transparent;}
			.btn {position: relative;top: 0;left: 0;bottom: 0;right: 0;}
			.file {position: fixed;z-index: 93;left: 0;right: 0;top: 0;bottom: 0;width: 100%;opacity: 0;}
		</style>
	</head>

	<body>
		
		<div id="content" class="content">
			<div id="btn" class="btn">
				<input v-if="compatibleFile" :multiple="multiple" @change="onChange" @click="onClick" :accept="accept" ref="file" class="file" type="file" />
				<div v-else @click="onClick" class="file"></div>
			</div>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/permission.js"></script>
		<script type="text/javascript">
			let _this;
			var vm = new Vue({
				el: '#content',
				data: {
					accept: '',
					multiple: true,
					isIos: false,
					compatibleFile: false,
					dom: null
				},
				mounted() {
					this.debug&&console.log('加载webview');
					_this = this;
					this.files = new Map();
					document.addEventListener('plusready', (e)=>{
					let {debug,instantly,prohibited,parent,isVUE3} = plus.webview.currentWebview();
					this.isIos = (plus.os.name == "iOS");
					this.debug = debug;
					this.instantly = instantly;
					this.prohibited = prohibited;
					
					
					let module;
					if (isVUE3==='YES') {module = parent}
					else {module = parent.replace(/^\.\/(.*)\.\w+$/, '$1')}
					if (!module.includes(atob('bHNqLQ=='))) {return;}
					if (this.prohibited.multiple === 'false') {
						this.prohibited.multiple = false;
					}
					if (this.prohibited.isPermissionInToast === 'false') {
						this.prohibited.isPermissionInToast = false;
					}
					if (this.prohibited.isPermissionInModal === 'false') {
						this.prohibited.isPermissionInModal = false;
					}
					if (this.prohibited.toBase === 'false') {
						this.prohibited.toBase = false;
					}
					this.accept = prohibited.accept; 
					this.multiple = this.prohibited.multiple;
					location.href = 'callback?retype=updateOption';
					if (!this.isIos && this.prohibited.permission.android.length) {
						try{
							this.dom = document.createElement('input');
							this.dom.type = 'file';
							this.dom.value = '';
							this.dom.accept = this.accept;
							this.dom.multiple = this.multiple;
							this.dom.onchange = event => {
								this.onChange(event)
							};
						}catch(e){
							console.error(e);
							this.compatibleFile = true;
						}
					}
					else {
						this.compatibleFile = true;
					}
					
					}, false);
				},
				methods: {
					toast(msg) {
						plus.nativeUI.toast(msg);
					},
					clear(name) {
						if (!name) {
							this.files.clear();
							return;
						}
						this.files.delete(name);
					},
					setData(option='{}') {
						this.debug&&console.log('更新参数：'+option);
						try{
							_this.option = JSON.parse(option);
						}catch(e){
							console.error('参数设置错误')
						}
					},
					async upload(name=''){
						if (name && this.files.has(name)) {
							await this.createUpload(this.files.get(name));
						}
						else {
							for (let item of this.files.values()) {
								if (item.type === 'waiting' || item.type === 'fail') {
									await this.createUpload(item);
								}
							}
						}
					},
					permissionModal(p) {
						let message = p.message || '是否前往开启权限？'
						plus.nativeUI.confirm(message,(e)=>{
							if (e.index === 0) {
								gotoAppPermissionSetting();
							}
						},'提示',['确定','取消']);
					},
					permissionToast(p) {
						if (this.prohibited.isPermissionInToast) {
							plus.nativeUI.toast(`<font style="font-size:14px">${p.message}</font>`,
								{
									type:'richtext',
									duration:'long',
									richTextStyle:{
										align:'center'
									},
									verticalAlign: 'top'
							});
						}
						else {
							location.href = `callback?retype=permissionBefore&permission=${p.value}&message=${encodeURIComponent(p.message)}`;
						}
					},
					async onClick(event) {
						if (this.isIos) {
							// ios未测过，因为现在没必要弹权限提示，android是因为华为bibi~，后面如果有问题可以联系我处理
							let permission = this.prohibited.permission.ios;
							if (permission && permission.length) {
								let t = null;
								for (let p of permission) {
									t = setTimeout(()=> {
										this.permissionToast(p);
									},500);
									let result = judgeIosPermission(p.value)
									if (!result) {
										this.debug&&console.error('用户未同意权限，提示用户申请');
										event.preventDefault();
										location.href = `callback?retype=permissionFail&permission=${p.value}&permissionResult=${result}&message=${encodeURIComponent(p.message)}`;
										if (this.prohibited.isPermissionInModal) {
											this.permissionModal(p);
										}
									}
									else {
										clearTimeout(t)
									}
									
								}
							}
						}
						else if (!this.compatibleFile) {
							let permission = this.prohibited.permission.android;
							if (permission && permission.length) {
								let t = null;
								for (let p of permission) {
									t = setTimeout(()=> {
										this.permissionToast(p);
									},200)
									let _dom = null;
									let result = await requestAndroidPermission(p.value)
									if (result !== 1) {
										event.preventDefault();
										this.debug&&console.error('用户未同意权限，提示用户申请');
										location.href = `callback?retype=permissionFail&permission=${p.value}&permissionResult=${result}&message=${encodeURIComponent(p.message)}`;
										if (this.prohibited.isPermissionInModal) {
											this.permissionModal(p);
										}
										return;
									}
									else {
										clearTimeout(t)
									}
								}
								clearTimeout(t)
								setTimeout(()=>{
								this.dom.click();
								this.dom.classList.add('file');
								document.getElementById('btn').appendChild(this.dom);
								},0)
							}
							else {
								setTimeout(()=>{
								this.dom.click();
								this.dom.classList.add('file');
								document.getElementById('btn').appendChild(this.dom);
								},0)
							}
						}
					},
					async onChange(e) {
						let fileDom;
						if (!this.compatibleFile) {
							fileDom = e.target || this.dom;
						}
						else {
							fileDom = this.$refs.file;
						}
						for (let file of fileDom.files) {
							if (this.files.size >= this.prohibited.count) {
								this.toast(`只允许上传${this.prohibited.count}个文件`);
								fileDom.value = '';
								break;
							}
							await this.addFile(file);
						}
						this.uploadAfter();
						fileDom.value = '';
					},
					addFile(file) {
						return new Promise((resolve,reject)=> {
							if (file) {
								let name = file.name;
								this.debug&&console.log('文件名称',name,'大小',file.size);
								// 限制文件格式
								let suffix = name.substring(name.lastIndexOf(".")+1).toLowerCase();
								let formats = this.prohibited.formats.toLowerCase();
								if (formats&&!formats.includes(suffix)) {
									this.toast(`不支持上传${suffix.toUpperCase()}格式文件`);
									return resolve();
								}
								// 限制文件大小
								if (file.size > 1024 * 1024 * Math.abs(this.prohibited.size)) {
									this.toast(`附件大小请勿超过${this.prohibited.size}M`)
									return resolve();
								}
								try{
									if (!this.prohibited.distinct) {
										let duplicateFile = [...this.files.keys()].filter(item=>{
											return (item.substring(0,item.lastIndexOf("("))||item.substring(0,item.lastIndexOf("."))) == name.substring(0,name.lastIndexOf(".")) &&
											item.substring(item.lastIndexOf(".")+1).toLowerCase() === suffix;
										})
										if (duplicateFile.length) {
											name = `${name.substring(0,name.lastIndexOf("."))}(${duplicateFile.length}).${suffix}`;
										}
									}
								}catch(e){
									name = Date.now() +'_'+ name;
								}
								let path = URL.createObjectURL(file);
								
								try{
									if (this.prohibited.toBase) {
										let reader = new FileReader();
										reader.readAsDataURL(file); 
										let _this = this;
										reader.onload = function(){
											_this.files.set(name,{file:encodeURIComponent(this.result),path,name: name,size: file.size,progress: 0,type: 'waiting'});
											return resolve();
										}
										reader.onerror = function(){throw 'file to base64 error';}
									} else {
										throw '';
									}
								}catch(e){
									this.files.set(name,{file,path,name: name,size: file.size,progress: 0,type: 'waiting'});
									return resolve();
								}
							}
						})
					},
					/**
					 * @returns {Map} 已选择的文件Map集
					 */
					callChange() {
						location.href = 'callback?retype=change&files=' + encodeURIComponent(JSON.stringify([...this.files]));
					},
					/**
					 * @returns {object} 正在处理的当前对象
					 */
					changeFilesItem(item,end='') {
						this.files.set(item.name,item);
						location.href = 'callback?retype=progress&end='+ end +'&item=' + encodeURIComponent(JSON.stringify(item));
					},
					uploadAfter() {
						this.callChange();
						setTimeout(()=>{
							this.instantly&&this.upload();
						},1000)
					},
					createUpload(item) {
						this.debug&&console.log('准备上传,option=：'+JSON.stringify(this.option));
						item.type = 'loading';
						delete item.responseText;
						return new Promise((resolve,reject)=>{
							let {url,name,method='POST',header={},formData={}} = this.option;
							let form = new FormData();
							for (let keys in formData) {
								form.append(keys, formData[keys])
							}
							form.append(name, item.file);
							let xmlRequest = new XMLHttpRequest();
							xmlRequest.open(method, url, true);
							for (let keys in header) {
								xmlRequest.setRequestHeader(keys, header[keys])
							}
							xmlRequest.upload.addEventListener(
								'progress',
								event => {
									if (event.lengthComputable) {
										let progress = Math.ceil((event.loaded * 100) / event.total)
										if (progress <= 100) {
											item.progress = progress;
											this.changeFilesItem(item);
										}
									}
								},
								false
							);
							
							xmlRequest.ontimeout = () => {
								console.error('请求超时')
								item.type = 'fail';
								this.changeFilesItem(item,true);
								return resolve(false);
							}
							
							xmlRequest.onreadystatechange = ev => {
								if (xmlRequest.readyState == 4) {
									this.debug && console.log('接口是否支持跨域',xmlRequest.withCredentials); 
									if (xmlRequest.status == 200) {
										this.debug && console.log('上传完成：' + xmlRequest.responseText)
										item['responseText'] = xmlRequest.responseText;
										item.type = 'success';
										this.changeFilesItem(item,true);
										return resolve(true);
									} else if (xmlRequest.status == 0) {
										console.error('status = 0 :请检查请求头Content-Type与服务端是否匹配，服务端已正确开启跨域，并且nginx未拦截阻止请求')
									}
									console.error('--ERROR--：status = ' + xmlRequest.status) 
									item.type = 'fail';
									this.changeFilesItem(item,true);
									return resolve(false);
								}
							}
							xmlRequest.send(form)
						});
						
					}
				}
			});
			
		</script>
	</body>

</html>