[转自] http://www.jb51.net/html5/136791.html

主要用到的是<input>的multiple属性

代码如下:

<input type="file" name="multipleFileUpload" multiple />

下面是页面的详细代码：

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Solution 4-5: Sending multiple files</title>

</head>

<body>

	<form id="myForm"

		action="http://10.10.25.31:8080/myupload/UploadPhotoServlet"

		ENCTYPE="multipart/form-data" METHOD="POST">

		<input type="file" name="multipleFileUpload" multiple /> <input

			type="submit" value="提交"> <input type="reset" value="重设">

	</form>

</body>

</html>

java后台的详细代码：

代码如下:

import java.io.File;

import java.io.IOException;

import java.text.SimpleDateFormat;

import java.util.Calendar;

import java.util.Date;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileUploadException;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**

 * Servlet implementation class UploadPhotoServlet

 */

public class UploadPhotoServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**

	 * @see HttpServlet#HttpServlet()

	 */

	public UploadPhotoServlet() {

		super();

		// TODO Auto-generated constructor stub

	}

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	protected void doGet(HttpServletRequest request,

			HttpServletResponse response) throws ServletException, IOException {

		// TODO Auto-generated method stub

		doPost(request, response);

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	@SuppressWarnings("unchecked")

	protected void doPost(HttpServletRequest request,

			HttpServletResponse response) throws ServletException, IOException {

		String imagePath = "c:\\uploadFile\\Image\\" + getEachDate() + "\\";// 按日期生成文件夹

		File uploadPath = new File(imagePath);

		if (!uploadPath.exists()) {

			uploadPath.mkdirs();

		}

		File tmp = new File("c:\\tmp\\");

		if (!tmp.exists()) {

			tmp.mkdirs();

		}

		DiskFileItemFactory factory = new DiskFileItemFactory();// 创建磁盘工厂

		factory.setRepository(tmp);// 设置文件缓存路径

		factory.setSizeThreshold(10 * 1096);// 将文件保存在内存还是磁盘临时文件夹的默认临界值，值为10240，即10kb

		ServletFileUpload sfu = new ServletFileUpload(factory);// 创建处理工具

		sfu.setSizeMax(10 * 1024 * 1024);// 服务器端可以接收的最大文件大小，-1表示无上限

		String fileName = null;

		try {

			List<FileItem> list = sfu.parseRequest(request);// 解析

			if (list.size() < 1) {

				return;

			}

			for (int j = 0; j < list.size(); j++) {

				FileItem item = list.get(j);

				fileName = item.getName();

				if (fileName.equals("")) {

					request.getRequestDispatcher("/com/visualizerPhoto.jsp")

							.forward(request, response);

					return;

				}

				int pos = fileName.lastIndexOf(".");// 取图片文件格式

				if (pos > 0) {

					Date date = new Date();

					fileName = imagePath + date.getTime()

							+ fileName.substring(pos);

				}

				System.out.println("item:" + item);

				item.write(new File(fileName));// 写到磁盘

			}

		} catch (FileUploadException e) {

			e.printStackTrace();

		} catch (Exception e) {

			e.printStackTrace();

		}

	}

	// 13-11-15

	public static String getEachDate() {

		Calendar cal = Calendar.getInstance();

		cal.add(Calendar.DATE, 0);

		String yesterday = new SimpleDateFormat("yyyy-MM-dd ").format(cal

				.getTime());

		String[] dates = yesterday.split("-");

		String realDate = dates[0].substring(2, 4) + "-" + dates[1] + "-"

				+ dates[2];

		return realDate.trim();

	}

}

下面是效果图：

HTML5实现多文件的上传示例代码的更多相关文章

  1. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  2. php产品细节图多图上传示例代码 无刷新

    前台文件代码 upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. HTML5+J2EE实现文件异步上传

    P.S. HTML5经过了W3C的8年努力,终于正式推广了.这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?).这个对象现 ...

  4. html5+php实现文件拖动上传功能

    界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...

  5. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  6. 基于struts2框架文件的上传与下载

    在开发一些社交网站时,需要有允许用户上传自己本地文件的功能,则需要文件的上传下载代码. 首先考虑的是文件的储存位置,这里不考虑存在数据库,因为通过数据库查询获取十分消耗资源与时间,故需将数据存储在服务 ...

  7. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

  8. 【转载】兼容php5，php7的cURL文件上传示例

    转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...

  9. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

随机推荐

  1. Nhibernate HQL 匿名类（严格说是map的使用以及构造函数的使用

    1.map的使用 var hql=string.Format(@"select new map( tc.LimitIndexType as LimitIndexType, tc.LimitS ...

  2. Part8-不用内存怎么行_我从内部看内存lesson1

  3. Spring MVC 4.2 增加 CORS 支持

    转自:http://blog.csdn.net/z69183787/article/details/53102112 Spring MVC 4.2 增加 CORS 支持 跨站 HTTP 请求(Cros ...

  4. Oracle数据库之单表查询

    接着上一篇的分享,今天主要给大家分享的是关于数据中的单表查询,单表查询很基础,也很重要,但是任何一个初学者必须要掌握的姿势,单表查询就是对单个表进行操作,查询我们想要的数据.单表查询里面的内容也是比较 ...

  5. 第05章-构建Spring Web应用程序

    1. Spring MVC起步 1.1 跟踪Spring MVC的请求 前端控制器DispatcherServlet 请求旅程的第一站是Spring的DispatcherServlet.与大多数基于J ...

  6. LibreOJ 6003 魔术球 (最大流)

    题解:每次加入两个点,对于和为平方数的两个值所对应的点建边,反正网络流可以跑残量网络,所以就没有什么关系了…… 代码如下: #include<cmath> #include<queu ...

  7. POJ1125 Stockbroker Grapevine(spfa枚举)

    Description Stockbrokers are known to overreact to rumours. You have been contracted to develop a me ...

  8. jquery中attr和prop的区别(转)

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  9. 阿里 vs. 腾讯，谁的收购更有眼光？

    近年来我们国内企业高速发展,各大集团纷纷收购其他公司发展自己,在这么多的集团收购里面尤其以阿里巴巴和腾讯的收购引人注目.在2014年里阿里巴巴先后投资了中信,美国奢侈品电子商务lstdibs,高德,优 ...

  10. centos7 .net core 使用supervisor守护进程，可以后台运行

    1.安装supervisor yum install supervisor 2.配置supervisor vi /etc/supervisord.conf 拉到最后,这里的意思是 /etc/super ...