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）的更多相关文章

  1. input 限制 上传文件类型

    参考:input file控件限制上传文件类型 HTML <input> 标签的 accept 属性 网页上添加一个input file HTML控件: <input id=&quo ...

  2. ASP.NET MVC使用input标签上传文件

    有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...

  3. JS分段上传文件（File）并使用MD5.js加密文件段用来后台校验

    HTML <form method="POST" name="form1" action="/mupload/upload/" enc ...

  4. input如何上传文件

    1)绑定input[type='file']的change事件 <input @change="uploadPhoto($event)" type="file&qu ...

  5. android 模拟器上传文件 Read-only file system

    在cmd窗口一条命令就可以了:adb shellmount -o remount rw /

  6. Html标签，file方式，上传文件

    恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...

  7. SpringMVC上传文件的三种方式(转)

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  8. SpringMVC上传文件的三种方式

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  9. springmvc+ajaxFileUpload上传文件(前后台彻底分离的情况下)

    首先是导入jar包: web.xml: <servlet> <servlet-name>mvc-dispatcher</servlet-name> <serv ...

随机推荐

  1. ping ip多进程处理小程序

    最近,环境维护需要经常需要判断某些服务器上的IP是否可达,由于服务器数量较多,逐一手工ping检查太过繁琐.写个小程序使用. 实现和说明 1.使用配置文件ip.txt实现可配置指定ip列表. 2.利用 ...

  2. Delphi接口的底层实现

    引言 接口是面向对象程序语言中一个很重要的元素,它被描述为一组服务的集合,对于客户端来说,我们关心的只是提供的服务,而不必关心服务是如何实现的:对于服务端的类来说,如果它想实现某种服务,实现与该服务相 ...

  3. 前端CSS3笔记

    第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CS ...

  4. 吴裕雄 python神经网络（7）

    import numpy as npnp.random.randint(0,49,3) # -*- coding:utf-8 -*-import kerasfrom keras.models impo ...

  5. hdu3189-Just Do It-(埃氏筛+唯一分解定理)

    Just Do It Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. Java,JDK动态代理的原理分析

    1. 代理基本概念: 以下是代理概念的百度解释:代理(百度百科) 总之一句话:三个元素,数据--->代理对象--->真实对象:复杂一点的可以理解为五个元素:输入数据--->代理对象- ...

  7. spring的aop的例子

    一个简单的Spring的AOP例子 2009-06-23 11:33:29|  分类: Spring |  标签: |举报 |字号大中小 订阅     package aop; /** * 目标对象的 ...

  8. 【Scheme】cons的过程性实现

    (define (cons x y) (define (dispatch m) (cond ((= m 0) x) ((= m 1) y))) dispatch) (define (car z) (z ...

  9. pytest 学习笔记二：兼容unittest、执行方式、生成报告

    1.官方文档上说pytest兼容unittest时,不支持setUpModule 和 tearDownModule,但实际验证是可以的. 验证的场景是py文件中,只有一个测试类, 经验证有多个测试类, ...

  10. c/c++ 中的重要函数

    1,strtod: 函数原型: #include <cstdlib> double strtod(const char *nptr, char **endptr); strtod 原型 名 ...