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

最新推荐文章于 2024-04-29 17:39:04 发布

anmo7165

最新推荐文章于 2024-04-29 17:39:04 发布

阅读量1k

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/aidenzdly/p/10901063.html

版权

<!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/*" οnchange="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>

转载于:https://www.cnblogs.com/aidenzdly/p/10901063.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

anmo7165

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端H5，点击选择图片控件，图片直接在页面上展示~

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div class="upload_box">...
复制链接

扫一扫