<！DOCTYPE HTML> <html> <head> <meta charset =“ utf-8”> <title> html5图片上传预览</ title> <style> #preview { 宽度：300像素； 高度：300像素； 溢出：隐藏； } #preview img { 宽度：100％; 高度：100％; } </ style> <script src =“ ../ jquery / jquery-1.8.3.js”> </ script> <script type =“ text / javascript”> function Preview1（file）{ var img = new Image（ ），网址= img.src =网址。
URL.revokeObjectURL（url） $（'＃preview'）。empty（）。append（$ img） } } 函数preview2（file）{ var reader = new FileReader（） reader.onload = function（e）{ var $ img = $（'<img>'）。attr（“ src”，e.target.result） $（'＃preview'）。empty（）。append（$ img） } reader.readAsDataURL（file） } $（function （）{ $（'[type = file]'）。change（function（e）{ var file = e.target.files [0] Preview1（file） }） }） </ script></ head>
<body> <form enctype =“ multipart / form-data” action =“” method =“ post”> <input type =“ file” name =“ imageUpload” /> <div id =“ preview” style =“ width： 300px;高度：300px;边框：1px纯灰色;“> </ div> </ form> </ body> </ html>
其中URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其他浏览器都支持。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60554.shtml
