在微信公众号里面需要上传头像，时间比较紧，调用学习jssdk并使用 来不及 就用了input
1、使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能
?
|
1
2
3
4
5
|
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
|
capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。
accept表示，直接打开系统文件目录。
2、input:file标签还支持一个multiple属性，表示可以支持多选，如：
?
|
1
|
<input type="file" accept="image/*" multiple>
|
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。
用form表单提交
?
|
1
2
3
4
5
6
7
8
9
10
|
<form id="uploadform" class="mui-input-group" style="width: 80%;margin: 0 auto;margin-top: 70px" action="/jxs/uploadtou.do" method="post" enctype="multipart/form-data" >
<div class="mui-input-row">
<label>图片</label>
<input required="required" class="mui-input-clear mui-input" type="file" name="file" id="photo_pick" accept="image/*">
</div>
<div class="mui-content-padded" style="width: 90%;margin: 0 auto;margin-top: 5px;padding: 10px">
<input style="color:#ffffff ;width: 100%;background: #00f7de" value="上传" type="submit">
</div>
</form>
|
上传之后图片显示在页面上
?
|
1
|
<div class="progress_dialog" style="margin-left:30px;margin-top:20px;width: 50%;height: 50%;"></div>
|
js
?
|
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
|
<script>
/*图片地址
/wp-content/uploads/202505/29/42060.html&fromurl=ippr_z2c%24qazdh3fazdh3fooo_z%26e3bkzcc_z%26e3bv54azdh3f4jtgektzitazdh3f8l9c9_z%26e3bip4s&gsm=0&rpstart=0&rpnum=0
*/
$(function() {
$("#photo_pick").on("change", function () {
var file = this.files[0];
photocompress(file, 50, $(".progress_dialog")[0])
$(".progress_dialog").show();
if (!this.files.length) return;
var files = array.prototype.slice.call(this.files);
if (files.length > 9) {
alert("最多同时只可上传9张图片");
return;
}
/* files.foreach(function (file, i) {
/!*var reader = new filereader();
reader.onload = function () {
var imgo = document.createelement("img");
imgo.src = reader.result;
}*!/
reader.readasdataurl(file);
$(".progress_dialog").hide();*/
});
})
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objdiv：一个是容器或者回调函数
photocompress()
*/
function photocompress(file, w, objdiv) {
var ready = new filereader();
/*开始读取指定的blob对象或file对象中的内容. 当读取操作完成时,readystate属性的值会成为done,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: url格式的字符串以表示所读取文件的内容.*/
ready.readasdataurl(file);
ready.onload = function () {
var re = this.result;
canvasdataurl(re, w, objdiv)
}
}
function canvasdataurl(re, w, objdiv) {
var newimg = new image();
newimg.src = re;
var imgwidth, imgheight, offsetx = 0, offsety = 0;
newimg.onload = function () {
var img = document.createelement("img");
img.src = newimg.src;
imgwidth = img.width;
imgheight = img.height;
var canvas = document.createelement("canvas");
canvas.width = w;
canvas.height = w;
var ctx = canvas.getcontext("2d");
ctx.clearrect(0, 0, w, w);
if (imgwidth > imgheight) {
imgwidth = w * imgwidth / imgheight;
imgheight = w;
offsetx = -math.round((imgwidth - w) / 6);
} else {
imgheight = w * imgheight / imgwidth;
imgwidth = w;
offsety = -math.round((imgheight - w) / 6);
}
ctx.drawimage(img, offsetx, offsety, imgwidth, imgheight);
var base64 = canvas.todataurl("image/jpeg", 0.1);
if (typeof objdiv == "object") {
objdiv.appendchild(canvas);
} else if (typeof objdiv == "function") {
objdiv(base64);
}
}
}
</script>
|
后台接收以及压缩
?
|
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
|
@postmapping("/uploadtou.do")
public string uploadtou(@requestparam(value = "file") multipartfile file, httpservletrequest request) throws ioexception {
system.out.println(file);
string result = "";
if (!file.isempty()) {
try {
shopuser u = (shopuser) request.getsession().getattribute("currentuser");
string extname = file.getoriginalfilename();
string filename = file.getname();
string suffix = extname.substring(extname.lastindexof(".") + 1);
system.err.println(suffix);
date now = new date();
simpledateformat outformat = new simpledateformat("yyyymmddhhmmss");
string s = outformat.format(now);
bufferedoutputstream bos = new bufferedoutputstream(
new fileoutputstream(new file("d:\\\\xiangmu\\\\demo\\\\" + s + "." + suffix)));
bos.write(file.getbytes());
bos.flush();
bos.close();
/**
* compress 图片缩放类的使用(缩略图)
* srcimage 为inputstream对象
* rectangle 为需要截图的长方形坐标
* proportion 为压缩比例
* **/
inputstream in = null;
//缩放后需要保存的路径
file savefile = new file("d:\\\\xiangmu\\\\demo\\\\" + s + s + "." + suffix);
try {
//原图片的路径
in = new fileinputstream(new file("d:\\\\xiangmu\\\\demo\\\\" + s + "." + suffix));
int length = in.available();
if (length / 1024 >= 10 && length / 1024 < 100) {
if (compress(in, savefile, 10)) {
system.out.println("图片压缩十倍！");
}
} else if (length / 1024 >= 100 && length / 1024 < 1000) {
if (compress(in, savefile, 100)) {
system.out.println("图片压缩100倍！");
}
} else if (length / 1024 >= 1000 && length / 1024 < 10000) {
if (compress(in, savefile, 1000)) {
system.out.println("图片压缩1000倍！");
}
} else if (length / 1024 < 10 && length / 1024 > 0) {
if (compress(in, savefile, 1)) {
system.out.println("图片压缩1倍！");
}
}
} catch (exception e) {
e.printstacktrace();
} finally {
in.close();
}
string filename = "/path/" + s + s + "." + suffix;//服务器地址
system.out.println(filename);
int a = shopservice.updateimg(u.getid(), filename);
system.out.println(filename);
} catch (exception e) {
e.printstacktrace();
}
} else {
}
return "wode.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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|