html5中文学习网

您的位置: 首页 > html5资讯 > 最新动态 » 正文

html5图片上传预览示例分享_html5教程技巧

[ ] 已经帮助:人解决问题
点评:这篇文章主要介绍了html5图片上传预览示例,需要的朋友可以参考下


复制代码
代码如下:
dSbHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>dSbHTML5中文学习网 - HTML5先行者学习网
<html lang="zh-cn">dSbHTML5中文学习网 - HTML5先行者学习网
<head>dSbHTML5中文学习网 - HTML5先行者学习网
<meta charset="utf-8" />dSbHTML5中文学习网 - HTML5先行者学习网
<meta name="author" content="EdieLei" />dSbHTML5中文学习网 - HTML5先行者学习网
<title>HTML5 图片上传预览</title>dSbHTML5中文学习网 - 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>>dSbHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript">dSbHTML5中文学习网 - HTML5先行者学习网
$(function(){dSbHTML5中文学习网 - HTML5先行者学习网
$('#img').change(function(){dSbHTML5中文学习网 - HTML5先行者学习网
var file = this.files[0]; //选择上传的文件dSbHTML5中文学习网 - HTML5先行者学习网
var r = new FileReader();dSbHTML5中文学习网 - HTML5先行者学习网
r.readAsDataURL(file); //Base64dSbHTML5中文学习网 - HTML5先行者学习网
$(r).load(function(){dSbHTML5中文学习网 - HTML5先行者学习网
$('div').html('<img src="'+ this.result +'" alt="" />');dSbHTML5中文学习网 - HTML5先行者学习网
});dSbHTML5中文学习网 - HTML5先行者学习网
});dSbHTML5中文学习网 - HTML5先行者学习网
});dSbHTML5中文学习网 - HTML5先行者学习网
</script>dSbHTML5中文学习网 - HTML5先行者学习网
</head>dSbHTML5中文学习网 - HTML5先行者学习网
<body>dSbHTML5中文学习网 - HTML5先行者学习网
<h3>HTML5 图片上传预览</h3>dSbHTML5中文学习网 - HTML5先行者学习网
<input id="img" type="file" accept="image/*" />dSbHTML5中文学习网 - HTML5先行者学习网
<div></div>dSbHTML5中文学习网 - HTML5先行者学习网
</body>dSbHTML5中文学习网 - HTML5先行者学习网
</html>dSbHTML5中文学习网 - HTML5先行者学习网
dSbHTML5中文学习网 - HTML5先行者学习网

dSbHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助