点评:这篇文章主要介绍了html5图片上传预览示例,需要的朋友可以参考下
NN3HTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>NN3HTML5中文学习网 - HTML5先行者学习网
<html lang="zh-cn">NN3HTML5中文学习网 - HTML5先行者学习网
<head>NN3HTML5中文学习网 - HTML5先行者学习网
<meta charset="utf-8" />NN3HTML5中文学习网 - HTML5先行者学习网
<meta name="author" content="EdieLei" />NN3HTML5中文学习网 - HTML5先行者学习网
<title>HTML5 图片上传预览</title>NN3HTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script</a>>NN3HTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript">NN3HTML5中文学习网 - HTML5先行者学习网
$(function(){NN3HTML5中文学习网 - HTML5先行者学习网
$('#img').change(function(){NN3HTML5中文学习网 - HTML5先行者学习网
var file = this.files[0]; //选择上传的文件NN3HTML5中文学习网 - HTML5先行者学习网
var r = new FileReader();NN3HTML5中文学习网 - HTML5先行者学习网
r.readAsDataURL(file); //Base64NN3HTML5中文学习网 - HTML5先行者学习网
$(r).load(function(){NN3HTML5中文学习网 - HTML5先行者学习网
$('div').html('<img src="'+ this.result +'" alt="" />');NN3HTML5中文学习网 - HTML5先行者学习网
});NN3HTML5中文学习网 - HTML5先行者学习网
});NN3HTML5中文学习网 - HTML5先行者学习网
});NN3HTML5中文学习网 - HTML5先行者学习网
</script>NN3HTML5中文学习网 - HTML5先行者学习网
</head>NN3HTML5中文学习网 - HTML5先行者学习网
<body>NN3HTML5中文学习网 - HTML5先行者学习网
<h3>HTML5 图片上传预览</h3>NN3HTML5中文学习网 - HTML5先行者学习网
<input id="img" type="file" accept="image/*" />NN3HTML5中文学习网 - HTML5先行者学习网
<div></div>NN3HTML5中文学习网 - HTML5先行者学习网
</body>NN3HTML5中文学习网 - HTML5先行者学习网
</html>NN3HTML5中文学习网 - HTML5先行者学习网
NN3HTML5中文学习网 - HTML5先行者学习网NN3HTML5中文学习网 - HTML5先行者学习网