<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片上传缩略图预览</title> <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) { try { 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) { var browser = navigator.appName; var b_version = navigator.appVersion var version = b_version.split(";"); var trim_Version = version[1].replace(/[ ]/g, ""); if (trim_Version == "MSIE6.0") { file.select(); //path = document.selection.createRange().text; path = window.URL.createObjectURL(file.files[0]); } else if (trim_Version == "MSIE7.0") { file.select(); //path = document.selection.createRange().text; path = window.URL.createObjectURL(file.files[0]); } else if (trim_Version == "MSIE8.0") { file.select(); //path = document.selection.createRange().text; path = window.URL.createObjectURL(file.files[0]); } else { file.select(); //file.blur(); //path = document.selection.createRange().text; path = window.URL.createObjectURL(file.files[0]); } } 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; } } } catch (e) { alert("R:"+e); } /*** *读取，图片为流文件 ***/ /* var reader = new FileReader(); reader.onload = function(e) { console.log(e.target.result); alert(e.target.result); var fromData = new FormData(); fromData.append("base64", e.target.result); } reader.readAsDataURL(document.querySelector("input[type=file]").files[0]); */ } </script> </head> <body> <div class='previewDemo'> <input id="file" type="file" onchange="preivew(this, document.getElementById('img'));" /> <br /> <img id="img" style="visibility:hidden" height="100px" width="100px" /> </div> </body> </html>