form表单，上传图片及展示

Posted 2021-01-06 naturl

.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>         

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

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

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