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/*"??οnchange='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
?
總結
以上是生活随笔為你收集整理的html5 图片上传 预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： art-template辅助函数和子模板
- 下一篇： html/css学习笔记（一）