<input name="coverImage" onClick="" onchange="setImagePreview(this);" type="file" style="text-align:center;float: left;" placeholder="只能选取 jpg、jif、bmp格式 " />
<div id="localImag" style="width: 80%;height: 80%;text-align: center;margin: auto;">
<img id="imagePreview" style="margin: auto;max-width: 250px; max-height: 200px;" alt="图片缺失" src="" />
</div>
1 <script type="text/javascript">
2 function setImagePreview(obj){
3 var img=document.getElementById("imagePreview");
4 /*img.src=getFullPath(obj);*/
5 testSetPreviewImg(obj);
6 }
7
8 /**
9 简单方式
10 **/
11 function testSetPreviewImg(docObj){
12 var imgObjPreview=document.getElementById("imagePreview");
13
14 var divs = document.getElementById("localImag");
15 if (docObj.files && docObj.files[0]) {
16 //火狐下，直接设img属性
17 imgObjPreview.style.display = 'block';
18 //imgObjPreview.style.width = '80%';
19 // imgObjPreview.style.height = '80%';
20 //imgObjPreview.src = docObj.files[0].getAsDataURL();
21 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
22 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
23 } else {
24 //IE下，使用滤镜
25 docObj.select();
26 var imgSrc = document.selection.createRange().text;
27 var localImagId = document.getElementById("localImag");
28 //必须设置初始大小
29 // localImagId.style.width = "80%";
30 //localImagId.style.height = "80%";
31 //图片异常的捕捉，防止用户修改后缀来伪造图片
32 try {
33 localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
34 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
35 } catch(e) {
36 alert("您上传的图片格式不正确，请重新选择!");
37 return false;
38 }
39 imgObjPreview.style.display = 'none';
40 document.selection.empty();
41 }
42
43 }
44
45
46
47
48
49 /**
50 一般在处理图片上传时，通常的逻辑都是将源图片上传到服务器端，再由服务器端的语言进行缩放大小的操作。
51 此种模式一般可以满足大部分的需求，但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图，再使用此种模式，将是一种浪费服务端资源以及带宽的方式，故我们考虑在浏览器端生成小图后再进行上传操作。
52 _canvas获取到的是base64编码的图片编码，将其传输到后端写入文件即可。
53 **/
54 function drawCanvasImage(obj,width, callback){
55
56 var $canvas = $('<canvas></canvas>'),
57 canvas = $canvas[0],
58 context = canvas.getContext('2d');
59
60 var img = new Image();
61
62 img.onload = function(){
63 if(width){
64 if(width > img.width){
65 var target_w = img.width;
66 var target_h = img.height;
67 }else{
68 var target_w = width;
69 var target_h = parseInt(target_w/img.width*img.height);
70 }
71 }else{
72 var target_w = img.width;
73 var target_h = img.height;
74 }
75 $canvas[0].width = target_w;
76 $canvas[0].height = target_h;
77
78 context.drawImage(img,0,0,target_w,target_h);
79 _canvas = canvas.toDataURL("image/png");
80 /* _canvas = canvas.toDataURL(); */
81 /*console.log(_canvas);*/
82 try{
83 callback(obj,_canvas);
84 }catch(e){}
85
86 }
87 img.src = getFullPath(obj);
88
89 }
90 /**函数getFullPath为获取选中的图片的本地地址**/
91 function getFullPath(obj)
92 {
93 if(obj)
94 {
95 //ie
96 if (window.navigator.userAgent.indexOf("MSIE")>=1)
97 {
98 obj.select();
99 return document.selection.createRange().text;
100 }
101 //firefox
102 else if(window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)
103 {
104 if(obj.files && window.URL.createObjectURL)
105 {
106 return window.URL.createObjectURL(obj.files[0]);
107 }
108 return obj.value;
109 }else if($.browser.safari){
110 if(window.webkitURL.createObjectURL && obj.files){
111 return window.webkitURL.createObjectURL(obj.files[0]);
112 }
113 return obj.value;
114 }
115 return obj.value;
116 }
117 }
118
119
120 /**实现即时显示上传缩略图，**/
121 var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
122 var preivew = function(file, container){
123 try{
124 var pic = new Picture(file, document.getElementById(container));
125 }catch(e){
126 alert(e);
127 }
128 }
129
130
131 //缩略图类定义
132 var Picture = function(file, container){
133 var height = 0,
134 widht = 0,
135 ext = '',
136 size = 0,
137 name = '',
138 path = '';
139 var self = this;
140 if(file){
141 name = file.value;
142 if(window.navigator.userAgent.indexOf("MSIE")>=1){
143 file.select();
144 path = document.selection.createRange().text;
145 }else if(window.navigator.userAgent.indexOf("Firefox")>=1){
146 if(file.files){
147 path = file.files.item(0).getAsDataURL();
148 }else{
149 path = file.value;
150 }
151 }
152 }else{
153 throw '无效的文件';
154 }
155 ext = name.substr(name.lastIndexOf("."), name.length);
156 if(container.tagName.toLowerCase() != 'img'){
157 throw '不是一个有效的图片容器';
158 container.visibility = 'hidden';
159 }
160 container.src = path;
161 container.alt = name;
162 container.style.visibility = 'visible';
163 height = container.height;
164 widht = container.widht;
165 size = container.fileSize;
166 this.get = function(name){
167 return self[name];
168 }
169 this.isValid = function(){
170 if(allowExt.indexOf(self.ext) !== -1){
171 throw '不允许上传该文件类型';
172 return false;
173 }
174 }
175 }
176
177</script>
