H5 File 对象概述

1、文件上传表单如下所示：method 必须是 post、enctype 必须是 multipart/form-data 类型、如果是多文件上传，则在 type=file 中加上 multiple 属性。

2、需要知道的是：“每一个 type=file 的 input 都是一个 File 对象数组 ”。（注意 File 是 DOM 对象）

<form method="post" enctype="multipart/form-data">单文件上传：<input type="file" id="fileUp">
</form><form method="post" enctype="multipart/form-data">多文件上传：<input type="file" id="fileUps" multiple>
</form>

3、File 对象从控制台输出的效果如下：

lastModified ：最后一次修改时间(毫秒数)
lastModifiedDate ：最后一次修改日期
name ：文件名
type ：文件类型（需要注意的是，它并不能完全识别出所有文件类型）
size ：文件大小，单位字节。

编码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">$(function () {//单文件上传$("#fileUp").on("change", function () {//$(this)[0] 等价于 $(this).get(0)，将 JQuery 对象转为 DOM 对象，files 为其属性，得到的是一个文件对象数组var files = $(this)[0].files;if(files.length>0){//未选中文件时，长度为0var file = files[0];//因为是单文件上传，所以只有一个文件（File）对象console.log(file);//下面所有的属性都可以从此对象的输出得到console.log("文件名称：" + file.name + ",文件大小：" + file.size + "字节,文件类型："+ file.type + ",上次修改时间：" + file.lastModifiedDate);}});//多文件上传$("#fileUps").on("change", function () {//$(this)[0] 等价于 $(this).get(0)，将 JQuery 对象转为 DOM 对象，files 为其属性，得到的是一个文件数组var files = $(this).get(0).files;for (var i = 0; i < files.length; i++) {console.log((i + 1) + "：文件名称：" + files[i].name + ",文件大小：" + files[i].size + "字节,文件类型："+ files[i].type + ",上次修改时间：" + files[i].lastModifiedDate);}});});</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">单文件上传：<input type="file" id="fileUp">
</form><form method="post" enctype="multipart/form-data">多文件上传：<input type="file" id="fileUps" multiple>
</form></body>
</html>

accept 属性过滤文件类型

1、accept 属性仅适用于 <input type="file">，它规定了可通过文件上传提交的文件类型。

2、提示：请不要将该属性作为您唯一的验证工具，应该在服务器上对文件上传进行验证。

3、语法：<input accept="value">，value 是一个或多个文件格式，多个时用 "," 隔开，如 ".png,.jpg,.gif"，不区分大小写。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="#"><!-- 只允许上传 .png、gif、jpg、jpeg 格式的文件，不区分大小写-->单文件上传： <input type="file" name="pic" accept=".gif,.jpg,.png,.jpeg"/><button type="submit">上传</button>
</form>
</body>
</html>

H5 File 对象获取 Input type=file 文件详细信息相关推荐

Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
js 获取input type=file 文件，并且上传
html页面: <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png, ...
用ajax传值input file,获取 input type=file 标签的内容,并使用ajax进行请求到服务器...
数据结构:栈顺序表方法和单链表方法(python版) #!/usr/bin/env python # -*- coding:utf-8 -*- class StackUnderflow(ValueE ...
html file onchange事件,input type=file 的onchange事件
οnclick="return FileUpload_onclick()" οnchange="return FileUpload_onselect()"/&g ...
AngularJS 双向绑定 input type='file'中文件名，文件内容
通过ng-model获取文件名,文件内容无效,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空 <div ng-controller="getFileCtr ...
java注解接收上传文件,前台：Input type=file 后台获取文件内容用的是spring注解，当地环境上传图片是好的，发布到服务器上图片读取不到，求大神指点...
当前位置:我的异常网» Java Web开发 » 前台:Input type="file" 后台获取文件内前台:Input type="file" 后台获取文 ...
jq监听input type=file发生改变，即选择文件,并获取文件名称
jq监听input type="file"发生改变,即选择文件,并获取文件名称 <input id="fileupload" name="fil ...
HTML，input type=“file“获取文件名、文件大小、文件类型
HTML代码 <input type="file" id="deviceFile"> 获取文件名.文件大小.文件类型 $('#deviceFile' ...
input type=file 获取选择文件名称、路径方法及input上传按钮美化
获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...
移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...

H5 File 对象获取 Input type=file 文件详细信息

H5 File 对象概述

编码示例

accept 属性过滤文件类型

H5 File 对象获取 Input type=file 文件详细信息相关推荐

最新文章

热门文章