uploadFile.html
4.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!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;
}
.btn .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 v-show="!disabled" class="btn">
<input @change="onChange" :accept="accept" ref="file" class="file" type="file" />
</div>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var xhr
var vm = new Vue({
el: '#content',
data: {
accept: '',
disabled: false
},
mounted() {
this.fileMap = new Map()
let fileDom = this.$refs.file
fileDom.value = ''
console.log('加载webview')
},
methods: {
submit(data) {
try {
data = JSON.parse(data)
} catch (e) {
//TODO handle the exception
data = {}
}
console.log('------------下个版本更新异步提交-------------：' + JSON.stringify(data))
},
onChange(e) {
let fileDom = this.$refs.file
let file = fileDom.files[0]
let { size = 10, manual = false } = plus.webview.currentWebview()
// 限制文件小于10M,可自行修改
if (file.size > (1024 * 1024 * Math.abs(size))) {
plus.nativeUI.toast(`附件大小请勿超过${size}M`)
return
}
return !manual ? this.createUpload(file) : this.addFile(file)
},
addFile(file) {
this.fileMap.set(file.name, file)
let arr = [...this.fileMap.keys()]
location.href = 'callback?retype=change&files=' + escape(JSON.stringify(arr))
},
createUpload(file) {
let { debug = false, url, name = 'file', method = 'POST', header = {}, formData: data = {} } =
plus.webview.currentWebview()
if (!url) { console.error('url为必传参数'); return }
data['fileName'] = file.name
debug && console.log(`
上传接口地址:${url}\n
附件key:${name}\n
附件名称:${file.name}\n
附件大小:${file.size}\n
请求头:${JSON.stringify(header)}\n
参数:${JSON.stringify(data)}
`)
let formData = new FormData()
for (let keys in data) { formData.append(keys, data[keys]) }
formData.append(name, file)
console.log('name++' + name)
console.log('method++' + method)
console.log('url++' + url)
xhr = new XMLHttpRequest()
xhr.open(method, url, true)
for (let keys in header) {
xhr.setRequestHeader(keys, header[keys]) }
xhr.upload.addEventListener('progress', event => {
console.log('event++' + JSON.stringify(event))
if (event.lengthComputable) {
let percent = Math.ceil(event.loaded * 100 / event.total)
if (percent <= 100) {
location.href = 'callback?retype=percent&percent=' + escape(percent)
}
}
}, false)
xhr.ontimeout = function() {
this.disabled = false
location.href = 'callback?retype=complete&status=408&msg=' + escape('请求超时')
}
xhr.onreadystatechange = ev => {
if (xhr.readyState == 4) {
let fileDom = this.$refs.file
fileDom.value = ''
this.disabled = false
console.log('sssss+++' + JSON.stringify(xhr))
if (xhr.status == 200) {
debug && console.log('上传完成：' + xhr.responseText)
location.href =
`callback?retype=complete&fileName=${escape(file.name)}&responseText=${escape(xhr.responseText)}&success=true&status=${xhr.status}&msg=${escape('上传成功')}`
return
} else if (xhr.status == 0) {
console.error(
'status = 01111 :请检查请求头Content-Type与服务端是否匹配，服务端已正确开启跨域，并且nginx未拦截阻止请求')
}
location.href =
`callback?retype=complete&fileName=${escape(file.name)}&status=${xhr.status}&msg=${escape('上传失败')}`
}
}
this.disabled = true
xhr.addEventListener('error', e => {
console.log(1234)
console.log(xhr.readyState)
})
xhr.send(formData)
}
}
})
</script>
</body>
</html>