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

本文主要是介绍HTML5调用手机摄像拍照、相册等功能input[type=file]样式美化及demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近用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]样式美化后效果图:

按钮美化效果

图片上传后效果图:

上传文件效果

这篇关于HTML5调用手机摄像拍照、相册等功能input[type=file]样式美化及demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/761559

相关文章

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

python如何调用java的jar包

《python如何调用java的jar包》这篇文章主要为大家详细介绍了python如何调用java的jar包,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录一、安装包二、使用步骤三、代码演示四、自己写一个jar包五、打包步骤六、方法补充一、安装包pip3 install

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h