html5图片上传预览示例分享
2014-07-14来源:易贤网

代码如下:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<meta name="author" content="EdieLei" />

<title>HTML5 图片上传预览</title>

<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>>

<script type="text/javascript">

$(function(){

$('#img').change(function(){

var file = this.files[0]; //选择上传的文件

var r = new FileReader();

r.readAsDataURL(file); //Base64

$(r).load(function(){

$('div').html('<img src="'+ this.result +'" alt="" />');

});

});

});

</script>

</head>

<body>

<h3>HTML5 图片上传预览</h3>

<input id="img" type="file" accept="image/*" />

<div></div>

</body>

</html>

更多信息请查看IT技术专栏

推荐信息