简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

html5图片上传预览示例分享

来源:易贤网   阅读:2373 次  日期:2014-07-14 14:24:38

温馨提示:易贤网小编为您整理了“html5图片上传预览示例分享”,方便广大网友查阅!

代码如下:

<!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技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:HTML5的hidden属性兼容老浏览器的方法
下一篇:使用html5制作loading图的示例
易贤网手机网站地址:html5图片上传预览示例分享
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!