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 rel="nofollow noopener noreferrer" 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>

本文html5图片上传预览示例分享到此结束。如果朋友让你生气,那就说明你仍然在意他的友情。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
浅析图片上传及canvas压缩的流程

基于Html5 canvas如何实现裁剪图片和马赛克功能及又拍云上传图片 功能

html5如何使用Drag事件编辑器拖拽上传图片的示例代码

图片上传插件ImgUploadJS:用HTML5 File API 如何实现截图粘贴上传、拖拽上传

Html5 FileReader如何实现即时上传图片功能实例代码