<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-"> <title>html 图片上传预览</title> <script src="jquery/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("input[type='file']").change(function(evt){ var files = evt.target.files; for (var i =0 , f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { $("#list img").attr("src",e.target.result); //预览图片的位置 }; })(f); reader.readAsDataURL(f); } }); }) </script> </head> <body> <form enctype="multipart/form-data" action="" method="post"> <input type="file" name="imageUpload" /> <div id="list"><img src=""></div> </form> </body> </html>