文件上传是网站中一种常见的功能。例如百度网盘、QQ 邮箱以及有道云笔记都可以实现文件的上传。在 HTML 中,把 <input> 标签的 type 属性设置为 file 就可以实现上传文件的功能,又叫做文件上传域。

具体语法格式如下:

<input type="file" />

  

例子:

<form action="xxx" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/png"/><br/>
<input type="submit"/>
</form>

  

注意:上传文件时,需要把 method 属性设置为 post(get 方式不能提交文件)。

———— 属性:

1、<form> 标签的 enctype 属性

enctype 属性规定被提交数据的编码。如果提交数据中包含文件时,需要把 <form> 标签的 enctype 属性设置为 multipart/form-data。如果不这样设置,文件将无法正常提交。

2、<input> 标签的 accept 属性

当 <input> 标签的 type 属性为 file 时,使用 accept 属性可以规定上传文件的类型。如果 accept 的属性值为多个,它们之间需要用逗号隔开。

3、<input>标签的multiple 属性

表示可以同时选择多个文件一起上传。

———— 常用的文件类型:

HTML——文件上传域的更多相关文章

  1. 使用ajaxfileupload.js实现文件上传

    ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url  上传处理程序地址. 2,file ...

  2. jsp\struts1.2\struts2 中文件上传(转)

    jsp\struts1.2\struts2 中文件上传 a.在jsp中简单利用Commons-fileupload组件实现 b.在struts1.2中实现c.在sturts2中实现现在把Code与大家 ...

  3. h5 input file ajax实现文件上传

    <input type="file" accept="image/*" height="0" class="file_inp ...

  4. SpringMVC文件上传 Excle文件 Poi解析 验证 去重 并批量导入 MYSQL数据库

    SpringMVC文件上传 Excle文件 Poi解析并批量导入 MYSQL数据库  /** * 业务需求说明: * 1 批量导入成员 并且 自主创建账号 * 2 校验数据格式 且 重复导入提示 已被 ...

  5. Spring MVC使用commons fileupload实现文件上传功能

    通过Maven建立Spring MVC项目,引入了Spring相关jar依赖. 1.为了使用commons fileupload组件,需要在pom.xml中添加依赖: <properties&g ...

  6. java 简单的文件上传

    一.文件上传原理: 1.文件上传的前提: a.form表单的method必须是post b.form表单的enctype必须是multipart/form-data(决定了POST请求方式,请求正文的 ...

  7. Query插件之ajaxFileUpload使用方法——input.change()事件的时候实现文件上传

    点击下载 这是HTML <input id="uploadedfile" name="uploadedfile" type="file" ...

  8. SpringBoot文件上传(MVC情况和webFlux情况)

    MVC情况 引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  9. Jersey实现文件上传下载

    一 文件上传 使用ajaxFileUpload进行文件上传的前端处理.在ajaxFileupload.js中,针对服务端返回的类型增加text判断, //ajax文件上传 function ajaxF ...

  10. jQuery插件之ajaxFileUpload(ajax文件上传)

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

随机推荐

  1. sql 语句系列(删库跑路系列)[八百章之第七章]

    前言 最开心的章节,没有之一. 删除违反参照完整性的记录 EMP 是员工表,DEPT 是部门表 DEPTNO是部门编号 delete from EMP where not exists ( selec ...

  2. c# 前台和后台线程

    前台和后台线程 Net的公用语言运行时(Common Language Runtime,CLR)能区分两种不同类型的线程:前台线程和后台线程.这两者的区别就是:应用程序必须运行完所有的前台线程才可以退 ...

  3. mm系列权重文件瘦身

    瘦身脚本: (会在resnet50.pth文件的同级目录下生成一个resnet50_thin.pth) import os import torch root_dir = os.getcwd() de ...

  4. JavaScript中的变量提升本质

    JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们.就好像是变量声明和函数声明被提升了代码的顶部一样. sayHi() // Hi there! function sayHi() { ...

  5. 力扣575(java&python)-分糖果(简单)

    题目: Alice 有 n 枚糖,其中第 i 枚糖的类型为 candyType[i] .Alice 注意到她的体重正在增长,所以前去拜访了一位医生. 医生建议 Alice 要少摄入糖分,只吃掉她所有糖 ...

  6. 前沿分享|阿里云数据库资深技术专家 姚奕玮:AnalyticDB MySQL离在线一体化技术揭秘

    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云数据库资深技术专家 姚奕玮关于"AnalyticDB MySQL离在线一体化技术揭秘&q ...

  7. [FAQ] Cordova 模拟器中不能访问域名, 未联网 ?

    首先保证电脑已联网,然后打开模拟器的浏览器输入常用网址,看看是否能够联网. 如果访问失败,在本机中在 cmd 中 ping www.baidu.com 获得百度的ip地址,然后在浏览器中输入 http ...

  8. [FAQ] 设置 npm 镜像源

    查看 npm 源: $ npm config get registry> http://registry.npmjs.org/ 修改 npm 源: $ npm config set regist ...

  9. [PHP] Laravel 依赖注入使用不当引起的内存溢出

    业务逻辑: 正常在 controller 方法的参数中注入某个类,方法中使用这个类时发生内存超出提示. 分析: 过往显示,正常使用依赖注入是不存在问题的,那么很有可能是哪里发生了循环引用,导致一直请求 ...

  10. 2019-4-29-win10-uwp-使用-Border-布局

    title author date CreateTime categories win10 uwp 使用 Border 布局 lindexi 2019-04-29 12:29:45 +0800 201 ...