t代码

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: 小  |  中  |  大  |  超大  

图片上传即时显示javascript代码这是基于Javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用。google浏览器不兼容。

这种方法兼容性比较差,仅供参考,建议使用Ajax方法来即时显示图片。

1.首先是javascript代码

/** * 图片上传即时显示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 = window.URL.createObjectURL(file.files[0]); } 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; } };};

2.html代码,主要在于onchange方法调用上面的javascript方法,然后是一个用来显示图片的img标签

<body> <input name="image"nchange="preivew(this,document.getElementById('img'));"/> <img id="img" style="visibility:hidden" height="150px" width="500px"></body>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航