jquery的上传图片UploadImage

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5  <head>
 6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7   <script type="text/javascript">
 8    var imgPath;
 9    var image;
10    var acceptExt = ["gif", "jpg", "bmp", "png"]; //允许后缀名
11    var widthLimit = {"min" : 0, "max" : 2000}; //宽度限制
12    var heightLimit = {"min" : 0, "max" : 2000}; //高度限制
13    
14    /* 预览图片 */
15    function preview(){
16     document.getElementById('preview').style.display = 'none';
17     document.getElementById('box').innerHTML = "<img width='" + image.width + "' height='" + image.height + "' src='" + imgPath + "'>";
18    }
19  
20    /* 检测图片大小 */
21    function checkSize() {
22     if ( image.width == 0 || image.height == 0 ) {
23      setTimeout(checkSize, 200);
24     } else {
25      if(image.width < widthLimit.min || image.width >= widthLimit.max || image.height < heightLimit.min || image.height >= heightLimit){
26       alert("文件大小不符合要求");
27      } else {
28       document.getElementById('preview').style.display = 'block';
29      }
30     }
31    }
32    
33    /* 加载图片 */
34    function loadImage(file) {
35        //检查图片
36     if(checkExt(file)){
37         //获取图片路径
38      imgPath = getPath(file);
39      image = new Image();
40      image.src = imgPath;
41      setTimeout(checkSize, 200);
42     }
43    }
44    
45    /* 获取图片路径 */
46    function getPath(file){
47      if(file){
48         //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，
49         //通过这个属性来判断浏览器类型，下面是我写的一个函数，这个函数返回一个包含浏览器名称和版本的数组。
50         //此函数可区分ie5.5~ie11、Chrome、Opera、Safair、Firefox这5种常见浏览器。
51        if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1){
52          file.select();
53          // IE下取得图片的本地路径
54          return document.selection.createRange().text;
55        } else if (window.navigator.userAgent.toLowerCase().indexOf("firefox")>=1){
56           //firefox
57          if(file.files){
58            // Firefox下取得的是图片的数据
59            return file.files.item(0).getAsDataURL();
60          }
61        }
62        return file.value;
63      }
64    }
65    
66    /* 检测后缀名 */
67    function checkExt(file) {
68     if(!file.value){
69      alert("请选择要上传的图片!");
70      return false;
71     } else if(!!this.acceptExt.length && !RegExp("\.(" + acceptExt.join("|") + ")$", "i").test(file.value)){
72      alert("图片格式错误!");
73      return false;
74     } 
75     
76     return true;
77    }
78   </script>
79  </head>
80  
81  <body>
82   <input type="file" name="pic" id="pic" onchange='loadImage(this)' />
83   <input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
84   <div id='box'></div>
85  </body>
86 </html>
posted on 2017-01-18 22:45 Sharpest 阅读(903) 评论(0) 收藏举报