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

- 1）设置enctype

默认为：enctype="application/x-www-form-urlencoded"（一般不设置）

若要表单中有需要上传文件的表单项时，则必须设置enctype：enctype="multipart/form-data"

- 2）设置method：提交方式

默认：get

需要上传文件时，必须设置为post

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

2.上传文件

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

伪代码

<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">

    <input type="text" name="username" /><br>

    <input type="file" name="filename" /><br>

    <input type="submit" value="上传" />

</form>

运行结果

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

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

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

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

伪代码

<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">

    <input type="text" name="username" /><br>

    <input type="file" name="filename" multiple="multiple" /><br>

    <input type="submit" value="上传" />

</form>

运行结果

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

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

效果：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

    <style>

        /*样式1*/

        .a-upload {

            padding: 4px 10px;

            height: 20px;

            line-height: 20px;

            position: relative;

            cursor: pointer;

            color: #888;

            background: #fafafa;

            border: 1px solid #ddd;

            border-radius: 4px;

            overflow: hidden;

            display: inline-block;

            *display: inline;

            *zoom: 1

        }

        .a-upload  input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

            filter: alpha(opacity=0);

            cursor: pointer

        }

        .a-upload:hover {

            color: #444;

            background: #eee;

            border-color: #ccc;

            text-decoration: none

        }

        /*样式2*/

        .file {

            position: relative;

            display: inline-block;

            background: #D0EEFF;

            border: 1px solid #99D3F5;

            border-radius: 4px;

            padding: 4px 12px;

            overflow: hidden;

            color: #1E88C7;

            text-decoration: none;

            text-indent: 0;

            line-height: 20px;

        }

        .file input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

        }

        .file:hover {

            background: #AADFFD;

            border-color: #78C3F3;

            color: #004974;

            text-decoration: none;

        }

    </style>

</head>

<body style="padding: 10px">

<a href="javascript:;" class="a-upload">

    <input type="file" name="" id="">点击这里上传文件

</a>

<a href="javascript:;" class="file">选择文件

    <input type="file" name="" id="">

</a>

</body>

</html>

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

http://blog.csdn.net/haibo0668/article/details/77262452

引用：http://blog.163.com/yibei_kukafei/blog/static/300210212015519114718389/

input 原生上传文件（type = file）的更多相关文章

input 限制上传文件类型
参考:input file控件限制上传文件类型 HTML <input> 标签的 accept 属性网页上添加一个input file HTML控件: <input id=&quo ...
ASP.NET MVC使用input标签上传文件
有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...
JS分段上传文件（File）并使用MD5.js加密文件段用来后台校验
HTML <form method="POST" name="form1" action="/mupload/upload/" enc ...
input如何上传文件
1)绑定input[type='file']的change事件 <input @change="uploadPhoto($event)" type="file&qu ...
android 模拟器上传文件 Read-only file system
在cmd窗口一条命令就可以了:adb shellmount -o remount rw /
Html标签，file方式，上传文件
恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...
SpringMVC上传文件的三种方式(转)
直接上代码吧,大伙一看便知这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...
SpringMVC上传文件的三种方式
直接上代码吧,大伙一看便知这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...
springmvc+ajaxFileUpload上传文件(前后台彻底分离的情况下)
首先是导入jar包: web.xml: <servlet> <servlet-name>mvc-dispatcher</servlet-name> <serv ...

随机推荐

配置nginx实现windows/iis应用负载均衡(转载)
配置nginx实现windows/iis应用负载均衡 nginx是俄罗斯人开发的一款跨平台的高性能HTTP和反向代理服务器,可以利用它实现web应用服务器的负载均衡. 反向代理是指将用户请求通过代 ...
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
昨天在项目中,重新封装组件时,引用了原来的一个子组件,但发现子组件在其他页面正常,在新的组件里面就发生保存, 然后把子组件注释,随便显示其div元素也正常,纠结了很久,最后发现引用的方式有问题子组件 ...
python实现排序算法四：BFPTR算法
所谓的BFPTR算法就是从n个数中寻找最小的K个数,主要思想可以参考注释,写得不是很好,特别是寻找中位数的中位数的时候,欢迎指正: 采用任意排序算法,将分组后的数据进行排序: __author__ = ...
使用支持向量机（SVM）算法进行分类
1 支持向量机(SVM)的基本概念 SVM是一种分类算法,其侧重于模式识别方面.使用SVM可以大大提高分类的准确性. 分类相当于模式识别的子集合,模式识别重点在于对已知数据进行特征发现与提取. ...
SQL Server 数据库中的几个常见的临界值
本文出处:http://www.cnblogs.com/wy123/p/6709520.html 1,SQL语句或者存储过程的最大长度(SQL字符串容量)是多少? 经常有人问,我的SQL语句是拼凑出来 ...
大型运输行业实战_day15_1_全文检索之Lucene
1.引入全文检索简介: 非结构化数据又一种叫法叫全文数据.从全文数据(文本)中进行检索就叫全文检索. 2.数据库搜索的弊端案例 : select * from product whe ...
spring 代理注解 <aop:aspectj-autoproxy />
spring默认使用jdk的代理方式,使用jdk的代理方式我们知道,代理的类需要实现一个接口,若果没有就会报,java.lang.NoSuchMethodException: com.sun.prox ...
2.7、CDH 搭建Hadoop在安装(使用向导设置群集)
步骤7:使用向导设置群集完成“ 群集安装”向导后,“ 群集设置”向导将自动启动.以下部分将指导您完成向导的每个页面: 选择服务分配角色设置数据库查看更改首次运行命令恭喜! 选择服务 “ 选 ...
appium的内存泄露问题
appium的一个内存泄露的问题标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...
JMeter学习（七）聚合报告之 90% Line 正确理解（转载）
转载自 http://www.cnblogs.com/yangxia-test 90% Line 参数正确的含义: 虽然,我的上面理解有一定的道理,显然它是错误的.那看看JMeter 官网是怎么说的? ...

input 原生上传文件（type = file）