即时显示缩略图
上傳圖片立即顯示圖片縮略圖，支持火狐和IE
chrome暫時不支持
演示接口：http://www.laruence.com/wp-content/uploads/previewDemo.html
<html> <head> <meta content="text/html; charset=utf-8" http-equiv=content-type> <meta name=author content="Laruence(www.laruence.com)"> <title>即時顯示縮略圖</title> </head> <body><div class='previewDemo'><input id="file" type="file" οnchange="preivew(this, document.getElementById('img'));"><img id="img" style="visibility:hidden" height="100px" width="100px"> </div> <script language="javascript" type="text/javascript">var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];var preivew = function(file, container){try{var pic = new Picture(file, container);}catch(e){alert(e);}}//縮略圖類定義var Picture = function(file, container){var height = 0, widht = 0, ext = '',size = 0,name = '',path = '';var self = this;if(file){ name = file.value;if (window.navigator.userAgent.indexOf("MSIE")>=1){ file.select(); path = document.selection.createRange().text; }else if(window.navigator.userAgent.indexOf("Firefox")>=1){ if(file.files){ path = file.files.item(0).getAsDataURL(); }else{path = file.value;}} }else{throw "bad file";} ext = name.substr(name.lastIndexOf("."), name.length);if(container.tagName.toLowerCase() != 'img'){throw "container is not a valid img label";container.visibility = 'hidden';}container.src = path;container.alt = name;container.style.visibility = 'visible';height = container.height;widht = container.widht;size = container.fileSize;this.get = function(name){return self[name];}this.isValid = function(){if(allowExt.indexOf(self.ext) !== -1){throw 'the ext is not allowed to upload';return false;}}} </script></body> </html>轉載于:https://www.cnblogs.com/y0umer/archive/2011/09/14/2809517.html
總結
- 上一篇： KingDZ 变菜鸟，每日一个C#小实例
- 下一篇： Objective-C语法之Object