点击图片进行文件上传并预览

html代码：

<form action="" method="post">
    <img src="./demo_ui_1010/img/404.jpg" alt="" width="200" height="200"/ id="prevView">
    <input type="file" name="" id="" value="" onchange="prev(this)"/>        
    <input type="submit" value="上传"/>
</form>

css代码：

<style type="text/css">
    input[type="submit"]{
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #31B0D5;
        border: none;
        width: 70px;
        height: 35px;
        font-size: 20px;
    }
    img{
        border-radius: 50%;
    }
    form{
        position: relative;
        width: 200px;
        height: 200px;
    }
    input[type="file"]{
        position: absolute;
        left: 0;
        top: 0;
        height: 200px;
        opacity: 0;
        cursor: pointer;
    }
</style>

JS代码：

<script type="text/javascript">
    function prev(event){
        //获取展示图片的区域
        var img = document.getElementById("prevView"); 
        //获取文件对象
        let file = event.files[0];
        //获取文件阅读器
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //给img的src设置图片url
            img.setAttribute("src", this.result);
        }
    }
</script>

展示结果：

 

描述：

点击图片，会进入选择图片，选择好图片之后，图片会变为已选择的图片。

 

总结：

1.点击图片域修改图片。

form设置相对定位，input框设置相对定位，并且大小设置为和图片一样大小。

2.预览实现原理。

 利用HTML5的FileReader，有兼容性，低版本的浏览器支持性不好。

我是分割线------------------------------------------------------------------