专栏首页前端资源input type="file"属性详解,利用capture调用手机摄像头

input type="file"属性详解,利用capture调用手机摄像头

<input> type 类型为 file 的标签,可以选择一个或多个文件,通过表单上传到服务器,也可以通过 Javascript 的 File API 对文件进行操作。

实例:

<input name="myFile" type="file">

常用参数:

Value:DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串,所以DOMString 直接映射到 String。

事件:change 事件 input

常用属性:accept, multiple, required, capture

IDL 属性:“文件” 和 “值”

方法:select()

Value:

文件输入的 value 属性,表示所选文件的路径。

如果选择了多个文件, 这个值表示第一个被选择的文件路径。JavaScript 可以通过 Input 的 FileList 属性获取到所有的文件路径。

没有选择文件该值为空字符串。

用法:

<form>
 <div>
   <label for="file">Choose file to upload</label>
   <input type="file" id="file" name="file" multiple>
 </div>
 <div>
   <button>Submit</button>
 </div>
</form>

忽略用户设备的影响,  input 提供了一个按钮,可以打开选择文件的窗口。

在上面的例子中,当表单被提交,每个选中的文件名将被添加到 URL 参数中`?file=file1.txt&file=file2.txt` 

accept(限制可用文件类型):

accept 属性:可以直接打开系统文件目录。当元素的 type 属性的值是 file,该属性表明服务器端可接受的文件类型,其它文件类型会将被忽略。

如果希望用户上传指定、类型的文件, 可以使用 input 的 accept 属性。

该属性的值可以是一个,也可以说由逗号分割开的多个文件类型:

包括,以 . 开始的文件扩展名。(例如:".jpg,.png,.doc")

或者,是一个有效的 MIME 类型,可以不需要扩展名,如下:

audio/* 表示所有音频文件 HTML5(支持)

video/* 表示视频文件 HTML5(支持)

image/* 表示图片文件 HTML5(支持)

支持逗号分隔的 MIME 类型字符串,写可以写成如下的方式:

accept="image/png" 或者 accept=".png" ,只接受 png 图片。

accept="image/png, image/jpeg" 或者 accept=".png, .jpg, .jpeg" ,接受 PNG 和 JPEG 文件。

accept="image/*" ,接受任何图片文件类型。

accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" ,接受任何 MS Doc 文件类型。

实例:

<form>
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

accept 属性并不会验证选中文件的类型,只是为开发者提供了一种引导用户做出期望行为的方式,用户还是有办法绕过浏览器的限制。

因此,在服务器端进行文件类型验证还是很有必要的。

multiple(多选):

multiple 属性:当用户所在的平台允许使用 Shift 或者 Contro键时,用户可以选择多个文件。

如果不希望多选,可以直接忽略 multiple 属性。

required(必填):HTML5(支持)

required 属性:指定用户在提交表单之前必须保证该元素值不为空。当 type 属性是 hidden,image 或者按钮类型(submit,reset,button)时不可使用。

:optional 和 :required CSS 伪元素的样式将可以被该字段应用作外观。

capture(调用设备媒体):

capture 属性:在webapp上使用 input 的 file 属性,指定 capture 属性可以调用系统默认相机、摄像和录音功能。

capture表示,可以捕获到系统默认设备的媒体信息,如下:

capture="camera" 相机

capture="camcorder" 摄像机

capture="microphone" 录音

实例:

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

通过 capture="camera" 属性的拓展,可以实现相机的效果:利用JS调用电脑摄像头实现拍照效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文件结束符EOF

    人们经常误认为 EOF 是从文件中读取的一个字符(牢记)。其实,EOF 不是一个字符,它被定义为是 int 类型的一个负数(比如 -1)。EOF 也不是文件中实...

    于小勇
  • C#刷遍Leetcode面试题系列连载(4): No.633 - 平方数之和

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Enjoy233
  • 2009年系统架构师软考考点:案例分析

    cwl_java
  • 软考分类精讲-系统可靠性分析与设计

    cwl_java
  • 2014年系统架构师软考案例分析考点

    cwl_java
  • 软考分类精讲-软件架构设计(一)

    cwl_java
  • 数据结构与算法-冒泡排序算法

    cwl_java
  • C++-入门语法(二)

    cwl_java
  • C++-入门语法(三)

    cwl_java
  • 2017年系统架构师软考案例分析考点

    判断以下哪些处于有状态,哪些处于无状态,有状态:会发生状态改变,无状态:不会发生状态改变

    cwl_java

扫码关注云+社区

领取腾讯云代金券