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