-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
162 lines (155 loc) · 4.89 KB
/
index.html
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
161
162
<html>
<head>
<meta charset="utf-8"/>
<title>用form外建个input实现</title>
<style>
img{
display:block;
margin:0 auto;
}
div{
margin:5px;
height:70px;
}
span{
color:red;
font-size: 40px;
}
input{
width:250px;
height:67px;
padding:0;
border:0;
}
input[type="button"]{
background: #90d116;
font-size: 40px;
position: absolute;
color:white;
}
/*由于input[type="file"]无法改变样式，故需要变透明，然后盖上能改样式的input[type="button"]*/
input[type="file"]{
position: relative;
top:72px;
left:176px;
opacity: 0;
z-index: 2;
}
label{
vertical-align: top;
font-size: 40px;
}
ul{
display: none;
height:150px;
}
li{
list-style-type: none;
float: left;
width:150px;
height:150px;
margin-right:10px;
overflow: hidden;
position: relative;
}
.loading{
position: absolute;
}
.img_tem{
position: absolute;
}
</style>
</head>
<body>
<input type="file" id="fileinput" accept="image/*"/>
<form action="store.php" method="post">
<div id="photo">
<label>上传图片:</label>
<input type="button" value="点击上传" id="input-btn"/>
</div>
<ul id="imgs"></ul>
<div>
<input type="submit" value="submit"/>
</div>
</form>
<script src="megapix-image.js"></script>
<script>
~function(win, doc) {
var Util = {}, fullpath, input, imgs;
Util.get = function(selector, isList) {
return isList ? doc.querySelectorAll(selector) : doc.querySelector(selector);
}
imgs = Util.get('#imgs');
input = Util.get('#fileinput');
if (window.File && window.FileReader && window.FileList) {
/* upload to server
* @param url {string} require url
* @param data {String: DataURL} data to send
* @param parent {DOM Element} parentNode
* @param imgLoad {DOM Element} the img element
* @param imgShow {DOM Element} the img element
*/
function upload(url, data, parent, imgLoad, imgShow) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
var new_input = document.createElement('input');
new_input.type = 'hidden';
new_input.value = xhr.response;
new_input.name = 'abc'+ new Date().getTime() + Math.random();
parent.appendChild(new_input);
xhr.onreadystatechange = null;
imgLoad.style.display = 'none';
imgShow.style.visibility = 'visible';
}
};
xhr.send('s='+ encodeURIComponent(data));
}
input.onchange = function(evt) {
imgs.style.display = 'block';
var files = evt.target.files
// 因为不是多选，所以不需要遍历，直接取[0]就行；多选与IOS下的拍照不能共存
, item = files[0]
// hack 小米原生浏览器取本地图片时输出的base64不完整（data:base64,），没有type
, name = item.name
, newType = name.split('.').pop()
// 验证文件类型
, reg = /^(jpeg|jpg|gif|png)$/i;
if(reg.test(newType)){
// 生成两张图片。一张显示loading，一张是压缩后图。
var li = document.createElement('li')
, loading = document.createElement('img')
, img_tem = document.createElement('img');
loading.src = 'loading.gif';
loading.class = 'loading';
img_tem.class = 'img_tem';
img_tem.style.visibility = 'hidden';
li.appendChild(loading);
li.appendChild(img_tem);
imgs.appendChild(li);
// hack IOS系统级别的百万大图canvas压缩异常，调用megapix-image.js
var mpImg = new MegaPixImage(item);
mpImg.render(img_tem,{ maxHeight:300,maxWidth:300 });
img_tem.onload = function(e){
var oridata = img_tem.src;
// hack 小米原生浏览器取本地图片时输出的base64不完整（data:base64,）
data='data:image/'+ newType +';base64,'+oridata.split(',')[1];
upload('./proxy.php', data, li, loading, img_tem);
};
}
}
} else {
input.style.display = 'none';
var input_btn = document.getElementById('input-btn')
, photo = document.getElementById('photo')
, note = document.createElement('span');
input_btn.style.display = 'none';
note.innerHTML = '您的浏览器不支持该功能';
photo.appendChild(note);
}
}(window, document)
</script>
</body>
</html>