移动Web拍照以及相册选择照片

最新推荐文章于 2022-04-27 13:49:50 发布

LaughingHe

最新推荐文章于 2022-04-27 13:49:50 发布

阅读量969

点赞数 1

分类专栏： web 文章标签： javascript css html html5 css3

本文链接：https://blog.youkuaiyun.com/qq_36050563/article/details/109710952

版权

web 专栏收录该内容

8 篇文章

订阅专栏

"本文介绍了在移动Web开发中实现拍照和从相册选择图片上传的步骤。通过使用`<input type="file">`标签结合`accept`属性限制图片类型，`onchange`事件处理图片选择，并利用FileReader将图片转换为base64格式动态展示。同时，展示了相关CSS样式以实现预览效果。代码示例详细解释了整个过程，帮助开发者快速实现这一功能。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动Web拍照以及相册选择照片

在做移动web开发的时候经常遇到上传图片，一般两种方式，拍照和相册中选择。今天我们就来讲讲如何实现。

在这里插入图片描述

1.首先需要用到input标签

<input type="file" accept="image/*" onchange="changeImage(this)" multiple="multiple">

这里type选择file，accept限制选择文件的类型，这里是图片类型，*标识图片的后缀如：jpeg、png等，onchange监听选择图片的方法，multiple用于多文件上传的类型。

2.重写onchange方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>

</head>

<body>

<header class="mui-bar mui-bar-nav my-header">
    <h1 class="mui-title">拍照及相册</h1>
</header>
<div id="file-container">
    <div class="item-div">
        <span>x</span>
        <input type="file" accept="image/*" onchange="changeImage(this)" multiple="multiple">
    </div>
</div>
<div id="preDiv">
    <div class="item-div"></div>
</div>
<script>
    let count = 0;

    function changeImage(ev) {
        let file = ev.files[0];
        //图片转base64
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = function () {
            if (count >= 3) {
                alert("最多三张");
                count = 3;
                return;
            }
            //获取base64的图片
            let result = this.result;
            //动态创建元素设置图片背景
            let divImage = $("<div></div>");
            divImage.addClass("item-div");
            divImage.css("background-image", "url(" + result + ")");
            let spanImage = $("<span>x</span>");
            spanImage.css("display", "inline-block");
            divImage.append(spanImage);
            $("#file-container").prepend(divImage);
            //响应叉号的点击事件
            spanImage.on("click", function () {
                $(this).parent().remove();
                //计数减减
                count--;
                //上传按钮显示
                $("#file-container").children(".item-div:last-child").css("display", "inline-block");
            });
            count++;
            //如果上传了三张就隐藏上传按钮
            if (count === 3) {
                $("#file-container").children(".item-div:last-child").css("display", "none");
            }
        };
        //多次响应onchange,不然只会执行一次
        $(ev).val("")
    }

</script>
</body>

</html>

3.CSS样式

*{
    margin: 0;
    padding: 0;
}
#file-container{
    margin-top: 44px;
    width: 100%;
    height: 85px;
    background-size: cover;
    padding: 10px 10px;
    overflow: hidden;
}
.item-div{
    height: 65px;
    width: 65px;
    background-image: url("../images/iconfont-tianjia.png");
    background-size: 100% 100%;
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
    margin-right: 10px;
    border: none;
    border-radius: 5px;
}
.item-div span{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: red;
    color: white;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 20px;
    display: none;
}
input{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 0;
}
#preDiv{
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.7;
    position: relative;
    top: 0;
    left: 0;
    display: none;
}