html5 图片上传 预览
<html>
<body>
<fieldset>
<legend>测试</legend>
<div class="form-group">
<div class="img-preview rl">
<form id="index_form1" name="index_form1" role="form" method="post" enctype="multipart/form-data" style="float: left;">
<div class="mui-col-xs-4 img-upload mui-text-center iconfont icon-shangchuantupian rl mui-pull-left" id="picone" style="background-image: url(imgs/andd.png);background-size:cover ;">
<span style="font-size: 15px; padding-left: 20px; position: absolute; float: left; margin-top: 104px;">测试</span>
<input type="file" class="wid-100 ab file" id="uploadpic1" name="uploadpic1" capture="camera" accept="image/*" onchange='doChange(this)'; />
<div class="mui-clearfix"></div>
</div>
</form>
</div>
</div>
</fieldset>
<img id="img1" src="a.jpg" style="width:200px;height:200px"/>
</body>
</html>
<script> if (typeof FileReader == 'undefined') { alert("抱歉,你的浏览器不支持FileReader"); } function doChange(obj) { html5ImgLocalReader('uploadpic1', 'img1'); } function html5ImgLocalReader(fileId, imgId) { var file1 = document.getElementById(fileId); var file = file1.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { document.getElementById(imgId).src=this.result; //document.getElementById(imgId).style.backgroundImage = "url("+this.result+")"; } } </script>
From:http://www.cnblogs.com/xuejianxiyang/p/6845162.html
作者:xuejianxiyang
出处:http://xuejianxiyang.cnblogs.com
关于作者:Heaven helps those who help themselves.
本文版权归原作者和博客园共有,欢迎转载,但未经原作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。