1，
html上传图片生成缩略图
2， <html>
3， <head>
4， <meta name="viewport" content="width=device-width" />
5， <title></title>
6，
7， <script type="text/javascript">
8， function getFileUrl(sourceId) {
9， var url;
10， if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
11， url = document.getElementById(sourceId).value;
12， } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
13， url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
14， } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
15， url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
16， }
17， return url;
18， }
19， function preImg(sourceId, targetId) {
20， var url = getFileUrl(sourceId);
21， var imgPre = document.getElementById(targetId);
22， imgPre.src = url;
23， }
24， </script>
25，
26， </head>
27， <body>
28， <div>
29， <br />
30， <br />
31， <a>上传者：<input type="text" /></a>
32， <br />
33， <br />
34， <form action="">
35， <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'photo');" />
36， <br />
37， <br />
38， <img id="photo" src="" width="300px" height="300px" style="display: block;" />
39， </form>
40， </div>
41， </body>
42， </html>
2，缩略图样式
<style type="text/css">
.img-container{
width:130px;
height:0px;
padding-bottom:130px;
position:relative;
}
.img-container img{
width:100%;
height:100%;
position:absolute;
}
</style>
3，spring 框架 后台保存图片等文件使用 文件路径 file:test/image，使用multipartFile接受文件
2， <html>
3， <head>
4， <meta name="viewport" content="width=device-width" />
5， <title></title>
6，
7， <script type="text/javascript">
8， function getFileUrl(sourceId) {
9， var url;
10， if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
11， url = document.getElementById(sourceId).value;
12， } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
13， url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
14， } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
15， url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
16， }
17， return url;
18， }
19， function preImg(sourceId, targetId) {
20， var url = getFileUrl(sourceId);
21， var imgPre = document.getElementById(targetId);
22， imgPre.src = url;
23， }
24， </script>
25，
26， </head>
27， <body>
28， <div>
29， <br />
30， <br />
31， <a>上传者：<input type="text" /></a>
32， <br />
33， <br />
34， <form action="">
35， <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'photo');" />
36， <br />
37， <br />
38， <img id="photo" src="" width="300px" height="300px" style="display: block;" />
39， </form>
40， </div>
41， </body>
42， </html>
2，缩略图样式
<style type="text/css">
.img-container{
width:130px;
height:0px;
padding-bottom:130px;
position:relative;
}
.img-container img{
width:100%;
height:100%;
position:absolute;
}
</style>
3，spring 框架 后台保存图片等文件使用 文件路径 file:test/image，使用multipartFile接受文件