input 原生上传文件(type = file)
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 ...
随机推荐
- 转:HTML5页面如何在手机端浏览器调用相机、相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...
- 10. Lambda表达式.md
为了简化匿名内部类的代码,具体定义: 例如将9.内部类中的匿名内部类例子: 原来代码: //Main.java public class Main { public static void main( ...
- ANg-线性回归算法
线性回归算法 linear regression 对于线性回归模型,我们期望对于样本数据集,通过假设函数,得出目标值 代价函数 m在这里指的是训练样本的数量 所以我们的目的就是得出代价函数(平方误差代 ...
- java axis2 webservice
http://clq9761.iteye.com/blog/976029/ 这篇文章写的是最全的,也是最好的.无须下一步下一步操作来操作去,写类直接调试,非常好!
- endl
endl英语意思是end of line,即一行输出结束,然后输出下一行. endl与cout搭配使用,意思是输出结束.
- 吴裕雄 11-MySQL查询数据
以下为在MySQL数据库中查询数据通用的 SELECT 语法:SELECT column_name,column_nameFROM table_name[WHERE Clause][LIMIT N][ ...
- Cascade Classifier Training 没有基础也会目标检测啦
Cascade Classifier Training 具体自己看: http://docs.opencv.org/2.4.13.2/doc/user_guide/ug_traincascade.ht ...
- java-学习8
方法的声明及使用 public class function { public static void main(String[] args) { printInfo();//调用printInfo( ...
- js性能提高篇
,最后统一将DocumentFragment添加到页面. 该做法可以减少页面渲染dom元素的次数.经IE和Fx下测试,在append1000个元素时,效率能提高10%-30%
- php mysql 查询判断周几
$where .= " and (DAYOFWEEK( from_unixtime(`px_time`, '%Y-%m-%d')) = 1)"; //周日从1开始