前端H5，点击选择图片控件，图片直接在页面上展示~ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="upload_box">
    <b>上传图片</b>
    <input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);"/> <!--文件上传选择按钮-->
    <div id="preview">
        <img id="imghead" src=""/> <!--图片显示位置-->
    </div>
</div>

</body>
</html>
<script type="text/javascript">
    // 选择图片显示
    function imgChange(obj) {
//获取点击的文本框
        var file = document.getElementById("file");
        var imgUrl = window.URL.createObjectURL(file.files[0]);
        var img = document.getElementById('imghead');
        img.setAttribute('src', imgUrl); // 修改img标签src属性值
    };
</script>

 

posted @ 2019-05-21 17:19  aidenzdly  阅读(3794)  评论(0)    收藏  举报