<!DOCTYPE HTML>
<html> <head> <meta
charset="utf-8"> <title>html5
图片上传预览</title> <style> #preview { width: 300px; height: 300px; overflow: hidden; } #preview img { width: 100%; height: 100%; } </style> <script
src="../jquery/jquery-1.8.3.js"></script> <script
type="text/javascript"> function preview1(file) { var img =
new Image(),
url = img.src =
URL.createObjectURL(file) var $img =
$(img) img.onload = function()
{ URL.revokeObjectURL(url) $(‘#preview‘).empty().append($img) } } function 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;height:300px;border:1px solid
gray;"></div></form></body></html>原文：http://www.cnblogs.com/wishyouhappy/p/3648423.html