Html5使用备忘

于 2020-10-16 16:44:37 发布
阅读量267 收藏
点赞数
分类专栏： UniGUI HTML5 文章标签： H5拍照 unigui拍照
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tvmerp/article/details/109119142
版权

1、调用手机摄像头拍照或从相册选择

利用HTML5 <input> 标签的type=“file”类型  ，
并且不涉及到js ，就可以实现，只针对type="file"， 新增accept属性为可以为audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。代码如下：

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

capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。
accept表示，直接打开系统文件目录。

其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：

html 代码效果预览
 <input type="file" accept="image/*" multiple>

加上这个multiple后，capture就没啥用了，因为multiple是专门yong用来支持多选的。

限制只能选择图片

 <input type="file" accept="image/*">  

限制只能选择视频
<input type="file" accept="video/*">  

限制只能选择音频

<input type="file" accept="audio/*">  

直接打开摄像头拍照

<input type="file" accept="image/*" capture="camera">  

直接打开摄像头录像

<input type="file" accept="video/*" capture="camera">  

实例：获取上传的文件信息

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>file multiple</title>

    </head>

    <body>

        <input type="file" multiple="multiple" id="test">

        <p id='content'></p>

        <script type="text/javascript">

            var test = document.getElementById('test');

            test.addEventListener('change', function() {

                var t_files = this.files;

                var str = '';

                for(var i = 0, len = t_files.length; i < len; i++) {

                    console.log(t_files[i]);

                    str += '<a href="javascript:void(0)">' + t_files[i].name + '</a><br/>';

                };

                document.getElementById('content').innerHTML = str;

            }, false);

        </script>

    </body>

</html>

 

昆曲之源_娄江河畔
关注
专栏目录
html input批量选择文件路径,你不知道的 input 之文件选择（accept、capture、multiple、webkitdirectory）...
weixin_39943868的博客
06-03 2031
前段时间写了一个上传文件前预览的功能，用于 pc 端。这次又要测试一下移动端的兼容性，在客户端内使用。正好整理一下，先上测试地址：DEMO 地址，目前有这些功能。动态设置 accept、capture、multiple、webkitdirectory?accept=.png 的形式快速还原场景上传前预览的功能，前端上传前预览文件 image、text、json、video、audioinput t...
unigui拍照完美兼容版
12-05
360游览器，谷歌游览器，火狐游览器，搜狗游览器，QQ游览器，猎豹游览器，还有保存功能。 这几个游览器都是完美兼容的
HTML <input> 标签的 accept 属性
dicuan0092的博客
08-01 343
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form> accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。 值描述 au...
input accept 属性
09-28 669
*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video *.ac3 audio/ac3 AC3 Audio *.asf allpication/vnd.ms-asf Advanced Streaming Format *.au audio/basic AU Audio *.css ...
html制作的备忘录html制作的备忘录
最新发布
06-27
综上所述，创建一个HTML备忘录应用需要掌握HTML的基本结构和元素，理解如何通过CSS进行美化，以及使用JavaScript增加交互性。通过`todoList-master`这个文件名，我们可以猜测这可能是一个关于任务管理的实例，可能...
H5SC:HTML5安全备忘单-与HTML5相关的XSS攻击向量的集合
04-05
HTML5安全备忘单 这是H5SC或HTML5安全备忘单的新目录。 在这里，您会发现三件事： 与HTML5相关的XSS攻击向量的集合 一组用于XSS测试的有用文件 一组以前隐藏的功能，可用于XSS测试 XSS向量 XSS向量的集合可以在这里...
HTML5 3D技术备忘
04-20
在HTML5中，通常使用`<canvas>`元素来承载WebGL渲染的目标区域。 "point.js"和"matrix3D.js"这两文件可能包含了一些3D数学和几何运算的函数，例如向量操作、矩阵变换等。在3D图形编程中，这些是构建和操纵3D物体的...
bootstrap-cheatsheet：Bootstrap5的最终备忘单
02-06
Bootstrap 5 CheatSheet通过ThemeSelection！ :rocket: 什么是Bootstrap 5 CheatSheet？ 它是Bootstrap 5类，变量和mixins的交互式列表。 :wrapped_gift: 它可以帮助您轻松地找到Bootstrap 4和Bootstrap 5之间的...
unigui拍照完美兼容版.rar
07-10
unigui拍照完美兼容版.rar
delphi web开发 UniGUI
11-24
UniGUI 是非常好用的delphi web开发 三方控件，这个还支持手机开发
Unigui电脑端使用手机微信扫描二维码登录(源码)_登录_struckgx8_unigUi登录_UniGui开发_unigui
10-01
unigui电脑微信扫码登陆，unigui开发
HTMLinput 标签的 accept 属性
丿灬安之若死
12-03 4116
实例 在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像： &lt;form&gt; &lt;input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /&gt; &lt;/form&gt; 亲自试一试 如果不限制图像的格式，可以写为：acc
<input type='file'> accept属性
文学超的博客
06-25 2万+
input标签是在前台开发中经常使用的，总结下其accept属性，即允许上传的文件类型。 input标签内置了很多允许上传的文件类型，只需要对应配置即可。 input type="file" accept="application/msword" > accept列表 1.accept="application/msexcel"2.accept="application/msword"3.
html input="file" 浏览时只显示指定文件类型 xls、xlsx、csv
热门推荐
韩世雷 程序员专栏
03-28 12万+
Valid Accept Types: For CSV files (.csv), use:  type="file" accept=".csv" /> For Excel Files 2003-2007 (.xls), use:  type="file" accept="application/vnd.ms-excel" /> For Excel Files
input的file类型的accept属性的值
u013379933的博客
08-12 4万+
属性值 值 描述 audio/* 接受所有的声音文件。 video/* 接受所有的视频文件。 image/* 接受所有的图像文件。 MIME_type 一个有效的 MIME 类型，不带参数。请参阅 IANA MIME 类型，获得标准 MIME 类型的完整列表。         在上传文件的时候，需要限制指定的文件类型，accept这个属性...
HTML5创新应用集锦：拼贴、日程到艺术创作
本文档分享了20个令人惊叹的HTML5应用程序示例，展示了HTML5技术在现代Web开发中的强大潜力。以下是部分亮点： 1. **HTML5 Canvas Collage**：利用HTML5 Canvas的强大绘图能力，这个应用允许用户创建拼贴画，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值