input[type=file]属性

最新推荐文章于 2025-04-26 08:42:21 发布

weixin_33795806

最新推荐文章于 2025-04-26 08:42:21 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 移动开发 ViewUI

原文链接：https://juejin.im/post/5aaf5454518825558154c763

本文详细介绍了HTML中input[type=file]控件的功能及其使用方法，包括如何限制上传文件类型、解决移动端体验不佳的问题以及如何获取用户所选文件的相关信息。

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

在Android手机webview中，是不支持上传文件的，网上说是修改Android端的代码导致的。

accept属性该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件：<input accept="image/*,audio/*" type="file"/>

change事件当用户点击控件上传文件会触发change事件，在移动端点击控件时会弹出键盘，体验非常不友好，通过设置属性onfocus="this.blur()"使其失去焦点 <input type="file" id="upload" onfocus="this.blur()"/>
file对象用户所选择的文件都存储在了一个FileList对象上，其中每个文件都对应了一个File对象 file对象一共由9个属性获取上次修改的时间file[0].lastModifiedDate) 获取文件名file[0].name 获取大小file[0].size 获取类型file[0].type
参考资料： 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 读取文件