码迷,mamicode.com
首页 > Web开发 > 详细

form表单,上传图片及展示

时间:2018-09-15 16:29:18      阅读:1366      评论:0      收藏:0      [点我收藏+]

标签:asc   inf   nts   技术分享   简单的   pre   NPU   div   alt   

.comment_con .file{position: relative;top:2rem;z-index: 999;width: 5rem;height: 5rem;background: red;opacity: 0}
.comment_con .upload{width: 5rem;height: 5rem;font-size: 4em;font-weight:lighter;line-height: 5rem;text-align: center;position: relative;top:-3rem;z-index: -1;background: #dfdbdc;}
.show img{width: 46%;height: 5rem;margin: 0.3rem;}
<form action="" enctype="multipart/form-data">   <div class="show"> <!-- <img src="" > -->   </div>   <div>     <input type="file" name="file" class="file" id="file" onchange="changepic(this)">     <div style="" class="upload">+</div>   </div> </form>
<script> var show=document.querySelector(‘.show‘) var show_img=show.getElementsByTagName(‘img‘)[0] function changepic(obj) { var newsrc=getObjectURL(obj.files[0]); var img=document.createElement(‘img‘) show.appendChild(img) img.src=newsrc } function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { url = window.webkitURL.createObjectURL(file) ; } return url ; } </script>

 上传图片之前的效果图如下:

技术分享图片

上传图片之后的效果图如下:

技术分享图片

只是简单的做了上传的处理,没有做删除操作

form表单,上传图片及展示

标签:asc   inf   nts   技术分享   简单的   pre   NPU   div   alt   

原文地址:https://www.cnblogs.com/naturl/p/9650980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!