[记录] input[type=file]属性详解

简介: [记录] input[type=file]属性详解

title: input[type=file]属性
date: 2017年8月11日 21:04:48
tags: html
categories: 教程

author: "JiaWei"

input[type=file] 控件用来上传文件。当使用控件时,就授权了网页和服务器访问对应的文件,就可以得到File对象。

在Android手机webview中,是不支持上传文件的,网上说是修改Android端的代码导致的。
  1. accept属性
    该属性表明了服务器端可接受的文件类型,可以限制你手机选择相关的文件,如果限制多个,可以用逗号分割,下面的代码就表示只能选择图片与音频相关的文件: <input accept="image/*,audio/*" type="file"/>

    属性值

  2. change事件

    当用户点击控件上传文件会触发change事件,在移动端点击控件时会弹出键盘,体验非常不友好,通过设置属性`onfocus="this.blur()"`使其失去焦点

    <input type="file" id="upload" onfocus="this.blur()"/>

  3. file对象

    用户所选择的文件都存储在了一个[FileList](https://developer.mozilla.org/zh-CN/docs/Web/API/FileList)对象上,其中每个文件都对应了一个[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)对象

file对象一共由9个属性 获取上次修改的时间file[0].lastModifiedDate) 获取文件名file[0].name 获取大小file[0].size 获取类型file[0].type

  1. 参考资料:

http://www.cnblogs.com/strick/p/5181701.html 移动端图片操作(一)
https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications    在web应用中使用文件
http://javascript.ruanyifeng.com/htmlapi/file.html  文件和二进制数据的操作http://www.iunbug.com/archives/2012/06/04/208.html   [译]JavaScript文件操作基础
http://www.iunbug.com/archives/2012/06/05/254.html   [译]JavaScript文件操作URL对象http://www.html5rocks.com/zh/tutorials/file/dndfiles     通过 File API 使用 JavaScript 读取文件

目录
相关文章
|
1月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
1月前
|
移动开发 自然语言处理 前端开发
input表单 type属性详解
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。
69 1
|
1月前
input file 设置文件选择类型
input file 设置文件选择类型
104 0
|
7月前
|
数据安全/隐私保护
input中常用的type属性与使用场景
input中常用的type属性与使用场景
33 0
|
8月前
|
数据安全/隐私保护
input表单的23个type属性
input表单的23个type属性
|
9月前
input type=file过滤图片
input type=file过滤图片
37 0
|
11月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
|
算法 JavaScript
你不知道的<input type="file">的小秘密
你不知道的<input type="file">的小秘密
你不知道的<input type="file">的小秘密
|
前端开发
使input type=“text“不可编辑
使input type=“text“不可编辑
289 0
使input type=“text“不可编辑