js实现上传文件实时显示缩略图

1 <script type="text/javascript"> 2 function setImagePreview(obj){ 3var img=document.getElementById("imagePreview"); 4 /*img.src=getFullPath(obj);*/ 5 testSetPreviewImg(obj); 6 }78 /** 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()方式获取，需要一下方式 22imgObjPreview.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 { 33localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 34localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 35 } catch(e) { 36alert("您上传的图片格式不正确，请重新选择!"); 37return false; 38 } 39 imgObjPreview.style.display = 'none'; 40 document.selection.empty(); 41 } 42 43 } 44 45 46474849 /** 50 一般在处理图片上传时，通常的逻辑都是将源图片上传到服务器端，再由服务器端的语言进行缩放大小的操作。 51此种模式一般可以满足大部分的需求，但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图，再使用此种模式，将是一种浪费服务端资源以及带宽的方式，故我们考虑在浏览器端生成小图后再进行上传操作。 52_canvas获取到的是base64编码的图片编码，将其传输到后端写入文件即可。 53**/ 54 function drawCanvasImage(obj,width, callback){ 55 56var $canvas = $('<canvas></canvas>'), 57 canvas = $canvas[0], 58 context = canvas.getContext('2d'); 59 60var img = new Image(); 61 62img.onload = function(){ 63if(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 78context.drawImage(img,0,0,target_w,target_h); 79_canvas = canvas.toDataURL("image/png"); 80 /* _canvas = canvas.toDataURL(); */ 81/*console.log(_canvas);*/ 82try{ 83 callback(obj,_canvas); 84}catch(e){} 85 86} 87img.src = getFullPath(obj); 88 89 } 90 /**函数getFullPath为获取选中的图片的本地地址**/ 91 function getFullPath(obj) 92 { 93if(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){ 123try{ 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){ 133var height = 0, 134widht = 0, 135ext = '', 136size = 0, 137name = '', 138path = ''; 139var self = this; 140if(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} 155ext = name.substr(name.lastIndexOf("."), name.length); 156if(container.tagName.toLowerCase() != 'img'){ 157 throw '不是一个有效的图片容器'; 158 container.visibility = 'hidden'; 159} 160container.src = path; 161container.alt = name; 162container.style.visibility = 'visible'; 163height = container.height; 164widht = container.widht; 165size = container.fileSize; 166this.get = function(name){ 167 return self[name]; 168} 169this.isValid = function(){ 170 if(allowExt.indexOf(self.ext) !== -1){ 171 throw '不允许上传该文件类型'; 172 return false; 173 } 174} 175 } 176 177</script>