19、HTML文件上传域
文件上传是网站中一种常见的功能。例如百度网盘、QQ 邮箱以及有道云笔记都可以实现文件的上传。在 HTML 中,把 <input>
标签的 type 属性设置为 file 就可以实现上传文件的功能,又叫做文件上传域。具体语法格式如下:
<input type="file" />
接下来我们看一下怎样才能实现文件的正确上传呢?具体代码如下:
纯文本复制
<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png"/><br/><input type="submit"/>
</form>
上传文件时,需要把 method 属性设置为 post(get 方式不能提交文件)。
上述代码中,使用了 标签的 enctype 属性以及 标签的 accept 属性,我们来分别看一下:
1. enctype属性
enctype 属性规定被提交数据的编码。如果提交数据中包含文件时,需要把 <form>
标签的 enctype 属性设置为 multipart/form-data。如果不这样设置,文件将无法正常提交。具体代码如下:
<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file"/><br/><input type="submit"/>
</form>
运行结果如图所示:
当然仅仅设置<form>
标签的 enctype 属性是不够的,如果要保证文件可以正确提交给表单服务器,还需要设置文件的类型,这时就需要使用 accept 属性。
2. accept属性,规定上传文件的类型
当 <input>
标签的 type 属性为 file 时,使用 accept 属性可以规定上传文件的类型。具体代码如下:
<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png"/>
</form>
此处规定上传的文件只能是.png格式的图片。如果想上传.pdf格式的图片,需要修改 accept 的属性值。
上传文件的类型有很多种,我们在文章的末尾会附上常用的文件类型。
如果 accept 的属性值为多个,它们之间需要用逗号隔开。
根据以上内容,我们总结出上传文件需要注意的 2 点:
- 把
<form>
标签的 enctype 属性设置为 multipart/form-data; - 使用
<input>
标签的 accept 属性来设置上传文件的类型。
然而这样编写代码只能实现每次上传一个文件,如果想实现一次上传多个文件,还要用到 <input>
标签的 multiple 属性。
3. multiple属性,一次上传多个文件
当给上传文件字段设置了 multiple 属性时,就表示可以同时选择多个文件一起上传。我们来看具体的代码:
<form action="" method="post" enctype="multipart/form-data"><input type="file" name="file" accept="image/png" multiple />
</form>
这时我们就可以一次性选择多个.png格式的图片文件,如图所示:
通过运行结果可以发现,当选择多个文件时,浏览器显示的是文件个数而不再是文件名称。
4. 常用的文件类型
19、HTML文件上传域相关推荐
- HTML5文件上传域的小例子
先上图 文件上传进度条.获取上传的文件信息.读取图片绑定到img元素之类的 代码 <!DOCTYPE html><html> <head><meta char ...
- 2016/4/19 ①单个文件上传 ②上传图片后 预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- 19. web 应用常用功能 -文件上传下载
文章目录 19.1 基本介绍 19.2 文件上传 19.2.1 文件上传的基本原理 19.2.2 文件上传应用实例 19.2.3 文件上传注意事项和细节 19.3 文件下载 19.3.1 文件下载的原 ...
- 使用ajaxfileupload.js实现文件上传
ajaxFileUpload是一个异步上传文件的jQuery插件 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,file ...
- 阿里云文件上传工具类
文件实体类 @Data public class UploadFile {private String fileName;private String fileType;private long fi ...
- spring mvc 实现单文件 || 多文件上传
文件上传 1. pom依赖(jar包) 2. 文件上传解析器配置 3. 上传实现 4. 下载||文件展示实现(io流的实现) 项目下载地址 https://github.com/sevenyounga ...
- 网络编程:TCP实现文件上传
客户端 package internet;import java.io.*; import java.net.InetAddress; import java.net.Socket;/*** Crea ...
最新文章
- phpinfo查看可以解析的后缀_配置nginx,Apache支持pathinfo模式-什么是phpinfo模式
- Windows Server云服务器配置深度学习环境WS
- 从Python中readline()函数读取的一行内容中去掉换行符\n
- 走出去广东谋定国际丰收节贸易会-林裕豪:从玉农业抓手
- ajax 入参为list_ajax向后台传入List
- array js 二分法_JS常见的算法
- java throws catch_java中throws与try...catch的区别点
- android获取ip命令
- Java中action类与实现类Actionsupport
- RS485通讯的工作原理?
- 电脑qq浏览器怎么滚动截长图_电脑上如何滚动截屏长图?这样做最简单
- Windows 2000虚拟机安装全过程(VMware)
- 08s01 mysql_mysql报错 code:08S01,msg:SQLSTATE
- Jqury基础大汇总来啦~
- missing Change-Id in message footer
- Duplicate named routes definition:
- 哈工程转专业计算机,哈尔滨工业大学2020级转专业情况看冷热
- 粘土人世纪开金手指不黑屏怎么弄
- php开源在线点餐系统,php点餐网系统开源源码|口福科技php开源网上订餐系统平台版v1.9下载_红软基地...
- Spark 作业提交
热门文章
- ML之ME/LF:机器学习中常见模型评估指标/损失函数(LiR损失、L1损失、L2损失、Logistic损失)求梯度/求导、案例应用之详细攻略
- Microsoft .NET:Microsoft .NET之.net4.5.1简介、安装、使用方法之详细攻略
- 机器学习-特征中的相关性及相关系数、卡方检验、互信息
- session 重写进入redis测试
- 单点系统架构的可用性与性能优化
- 后缀自动机序列自动机综合
- 面向对象简单原则(转)
- 动态链接库dll,静态链接库lib, 导入库lib 转
- 翻译JScript中的面向对象系列文章
- Linux 设备模型之 (kobject、kset 和 Subsystem)(二)