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>