博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input 原生上传文件(type = file)
阅读量:5265 次
发布时间:2019-06-14

本文共 683 字,大约阅读时间需要 2 分钟。

1.表单上传文件的步骤:

- 1)设置enctype

默认为:enctype="application/x-www-form-urlencoded"(一般不设置)若要表单中有需要上传文件的表单项时,则必须设置enctype:enctype="multipart/form-data"

- 2)设置method:提交方式

默认:get需要上传文件时,必须设置为post

因为get方式携带的信息量太小,而且传输的数据都会显示在地址栏,对于图片等文件无法处理


2.上传文件

一次只能选择一个文件上传

伪代码

运行结果

此时我们可以看到一次只能选择一个文件,进行上传。

 


一次能同时选中多个文件同时上传

很多时候我们需要同时选择多个文件实现多个文件的上传,那么只选择一个文件的情况就不适用,如何设置呢?

在input中设置属性multiple即可 - - multiple=”multiple”

伪代码

运行结果

此时我们可以看到一次可以选择多个文件,进行上传。

 

css input[type=file] 样式美化(input上传文件样式 )

效果:

 

 

无标题文档 点击这里上传文件选择文件

 

带有图片预览功能的上传表单

 

引用:

 

 

 

转载于:https://www.cnblogs.com/lst619247/p/9261664.html

你可能感兴趣的文章
mysqladmin 修改和 初始化密码
查看>>
字符串
查看>>
vue2.x directive - 限制input只能输入正整数
查看>>
实现MyLinkedList类深入理解LinkedList
查看>>
自定义返回模型
查看>>
C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 客户端多网络支持
查看>>
HDU 4122
查看>>
Suite3.4.7和Keil u3自带fx2.h、fx2regs.h文件的异同
查看>>
打飞机游戏【来源于Crossin的编程教室 http://chuansong.me/account/crossincode 】
查看>>
[LeetCode] Merge Intervals
查看>>
【翻译自mos文章】当点击完 finishbutton后,dbca 或者dbua hang住
查看>>
Linux编程简介——gcc
查看>>
一种高效的序列化方式——MessagePack
查看>>
2019年春季学期第四周作业
查看>>
2019春第十周作业
查看>>
解决ThinkPHP关闭调试模式时报错的问题汇总
查看>>
【APT】SqlServer游标使用
查看>>
关于ExecuteNonQuery()返回值为-1
查看>>
Firefox修復QQ快速登錄
查看>>
PAT——1060. 爱丁顿数
查看>>