HTML5调用手机摄像拍照、相册等功能<input[type=file]>样式美化及demo

本文介绍如何利用HTML中的input标签实现文件上传功能,并详细解释了如何通过设置不同的属性来实现拍照、录制视频和录音等功能。此外,还提供了一个样例代码,展示了如何美化文件选择按钮并预览所选图片。

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

最近用MUI做了个移动端项目,设计中涉及到调用手机摄像头拍照等功能需求,然而在PLUS环境下才能直接调用,这就让人有点头疼了,后经查询资料学习了解到有一个很简单的方法就是input:file标签,不需要复杂代码操作就能实现调用拍照、相册等功能。

//capture -- 设置选择需要调用的功能
//camera -- 照相机
//camcorder -- 摄像机
//microphone -- 录音 
//accept -- 直接打开系统文件目录 

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

//input:file标签还有一个属性multiple 用来支持多选 直接呼出原生选项
<input type="file" accept="image/*" multiple>
input [ type=file ] 按钮美化及上传demo

简单说就是:先将原按钮透明度opacity设为0,再外层用标签包裹,最终实现美化功能。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> <input[type=file]>上传demo </title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        p.bottomTitlt{
            margin: 0;
            letter-spacing: 2px;
            padding:  0;
        }
    </style>
</head>
<body>

<a href="javaScript:;" class="file">
    <p class="bottomTitlt">身份证正面</p>
    <img src="" alt=""/>
    <input type="file"  placeholder="身份证正面"  >
</a>
<p class="showFileName"></p>



<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<script type="text/javascript">
    $(".file").on("change","input[type='file']",function(){
        var filePath=$(this).val();
        var fr= new FileReader();
        var imgObj = this.files[0];
        fr.readAsDataURL(imgObj);
        var obj = $(this).prev()[0];
        if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("JPG")!=-1 || filePath.indexOf("PNG")!=-1 || filePath.indexOf("png")!=-1){
            var arr = filePath.split('\\');
            var fileName = arr[arr.length-1];
            $(this).parent().next().html(fileName);
            fr.onload=function( ){
                obj.src=this.result;
            };
        }else{
            $(this).parent().next().html("您未上传文件,或者您上传文件类型有误!").css("color","red");
            return false
        }
    });
</script>

</body>
</html>

input[type=file]样式美化后效果图:

按钮美化效果

图片上传后效果图:

上传文件效果

<think>嗯,我现在要分析用户提供的这段HTML代码,看看里面有什么问题。首先,用户可能想知道这段代码有什么错误,或者如何改进它。我需要仔细检查每个部分。 首先看表单部分,`<form action="login.php" method="get" onclick="alert">`。这里有一个`onclick`事件直接写在form标签里,但是值只有"alert",这应该是个错误。因为alert函数需要参数,比如`alert('消息')`,现在这样点击表单时可能不会执行任何有效的弹窗,或者会报错。 接下来是JavaScript的函数test。里面有两处问题:`document.getElementsById`,正确的方法名应该是`getElementById`,因为getElementsById是不存在的,正确的单数形式是getElementById,而getElementsByClassName或getElementsByTagName才是复数。然后,两次都用了var a=...,导致第二个赋值覆盖了第一个,应该是分别获取username和password的值,存储到不同变量中,比如var a和var b。另外,函数里可能想获取的是password的值,但两次都用了相同的变量名a,这显然有问题。 然后是表单内的各个输入元素。比如单选按钮(radio)的name都是"sex",这没问题,可以正确分组。但复选框(checkbox)的name都是"xq",这样提交时多个同名的复选框会如何处理呢?可能需要不同的value或者用数组形式,比如name="xq[]",不过这可能取决于后端处理方式。不过这里用户可能只是练习,所以问题不大,但需要注意。 下拉菜单`<select id="2" name="city">`,这里的id是数字"2",虽然HTML5允许id以数字开头,但最好使用字母开头,避免潜在的问题。此外,选项的value属性没有明确指定,比如`<option value="成都">成都</option>`,否则提交时可能会用选项的文本内容作为值,但这也是可接受的,不过显式指定value更好。 文件上传的input是`<input type="file" name="">`,这里name属性为空,提交时可能无法正确传递文件数据,应该给一个name,比如name="file"。 textarea的id是"1",同样的问题,最好用字母开头的id,比如"desc"。而且name属性为空,可能需要指定name以便后端处理。 提交按钮`<input type="button" value="提交" name= "" >`,这里type是button,点击后不会触发表单的提交,应该改为type="submit"。或者如果保持type="button",需要绑定onclick事件来提交表单。现在的代码中按钮没有提交功能,表单可能无法提交。 另外,按钮`<button>注册</button>`在表单中默认类型是submit,所以点击它会触发表单提交,但可能和提交按钮的预期不同,需要注意。 最后,script标签引用了test.js,但之前已经有一个内联的script,可能需要确认路径是否正确,不过这可能只是示例。 总结一下,主要问题包括: 1. getElementById拼写错误,变量重复赋值。 2. 表单的onclick事件处理不正确。 3. 提交按钮类型错误,无法提交表单。 4. 文件输入和textarea的name属性缺失。 5. id命名不规范,使用数字开头。 6. 复选框的name相同可能影响数据提交。 接下来要一步步解释这些问题,并提供修正后的代码示例。</think>您提供的代码是一个包含表单和脚本的HTML片段,存在多处语法和逻辑错误。以下分步骤分析并修正: --- ### **一、表单属性错误** #### 问题代码: ```html <form action="login.php" method="get" onclick="alert"> ``` #### 问题分析: 1. `onclick="alert"` 缺少函数调用和参数,应改为 `onclick="alert('消息')"` 2. 表单提交方式为 `method="get"`,但包含文件上传控件(`type="file"`),需改为 `method="post"`(GET无法上传文件) #### 修正代码: ```html <form action="login.php" method="post" onsubmit="return test()"> ``` --- ### **二、JavaScript函数错误** #### 问题代码: ```javascript function test() { var a=document.getElementsById('username').value; var a=document.getElementsById('password').value; alert(a); } ``` #### 问题分析: 1. `getElementsById` 是错误写法,正确为 `getElementById` 2. 变量 `a` 被重复赋值,导致密码覆盖用户名 3. 未阻止表单默认提交行为(需添加 `return false`) #### 修正代码: ```javascript function test() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; alert("用户名:" + username + "\n密码:" + password); return false; // 阻止表单提交 } ``` --- ### **三、表单元素错误** #### 1. 用户名/密码输入框 #### 问题代码: ```html 用户:<input type="text" name="username"><br> 密码:<input type="password" name="password"><br> ``` #### 问题分析: - 缺少 `id` 属性,导致 `document.getElementById` 无法定位元素 #### 修正代码: ```html 用户:<input type="text" id="username" name="username"><br> 密码:<input type="password" id="password" name="password"><br> ``` --- #### 2. 复选框(Checkbox) #### 问题代码: ```html 打游戏:<input type="checkbox" name="xq"> 听音乐:<input type="checkbox" name="xq"> 看小说:<input type="checkbox" name="xq"> ``` #### 问题分析: - 同名复选框提交时只会传递最后一个选中值,需改为数组形式 `name="xq[]"` #### 修正代码: ```html 打游戏:<input type="checkbox" name="xq[]" value="游戏"> 听音乐:<input type="checkbox" name="xq[]" value="音乐"> 看小说:<input type="checkbox" name="xq[]" value="小说"> ``` --- #### 3. 文件上传控件 #### 问题代码: ```html <input type="file" name=""> ``` #### 问题分析: - `name` 属性为空,后端无法获取文件数据 #### 修正代码: ```html <input type="file" name="file"> ``` --- #### 4. 提交按钮 #### 问题代码: ```html <input type="button" value="提交" name= "" > ``` #### 问题分析: - `type="button"` 不会触发表单提交,需改为 `type="submit"` #### 修正代码: ```html <input type="submit" value="提交"> ``` --- ### **四、最终修正代码** ```html <form action="login.php" method="post" onsubmit="return test()"> <script> function test() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; alert("用户名:" + username + "\n密码:" + password); return false; // 测试时阻止提交 } </script> 用户:<input type="text" id="username" name="username"><br> 密码:<input type="password" id="password" name="password"><br> 性别: 男:<input type="radio" name="sex" value="male"> 女:<input type="radio" name="sex" value="female"><br> 爱好: 打游戏:<input type="checkbox" name="hobby[]" value="游戏"> 听音乐:<input type="checkbox" name="hobby[]" value="音乐"> 看小说:<input type="checkbox" name="hobby[]" value="小说"><br> 城市: <select name="city"> <option value="成都">成都</option> <option value="广安">广安</option> <option value="北京">北京</option> </select><br> 上传文件:<input type="file" name="file"><br> 留言:<textarea name="message" rows="5" cols="20"></textarea><br> <input type="submit" value="提交"> <button type="button">注册</button> </form> ``` --- ### **五、关键改进总结** 1. **表单属性**:改用 `method="post"` 支持文件上传 2. **脚本修复**:修正 `getElementById` 和变量逻辑 3. **元素命名**:统一 `id` 和 `name`,确保前后端数据传递 4. **控件规范**:复选框使用 `name="hobby[]"` 传递数组,文件上传添加 `name="file"`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值