[转自] 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. Unix基本系统数据类型和stat结构体

    Unix基本系统数据类型 历史上,某些UNIX变量已与某些C数据类型联系在一起,例如,历史上主.次设备号存放在一个1 6位的短整型中, 8位表示主设备号,另外8位表示次设备号.但是,很多较大的系统需要 ...

  2. CF519E A and B and Lecture Rooms

    最近很颓……难题想不动……水题写不对,NOIP怕是

  3. SQLite在php中的接口

    sqlite是一种比较轻型的嵌入式数据库,它与 SQL 之间的不同,为什么需要它,以及它的应用程序数据库处理方式.SQLite是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数 ...

  4. mvc json 日期问题的最简单解决方法

    1.首先编写BaseController这个类,需要引入Newtonsoft.Json.dll程序集 using System;using System.Collections.Generic;usi ...

  5. Charles安装证书ssl proxying

    1.找到工具栏上方的 help 按钮 2.help下面有一个 ssl proxying的选项,点击ssl proxying 选择里面的第三个:install charles root certific ...

  6. Python基础入门-字符串

    字符串详解 字符串的用法是最多的,很多功能的实现都离不开字符串,而且字符串的使用方法也很多,这里面不能说全部给大家一一介绍,只能说把一些常用的列举出来,方便回忆或者说供大家参考,谢谢!请继续往下看~~ ...

  7. 三解炸弹人——DFS

    原创 枚举解炸弹人—— https://www.cnblogs.com/chiweiming/p/9295262.html BFS解炸弹人—— https://www.cnblogs.com/chiw ...

  8. [转]xe6 android 使用距离传感器(Proximiry)

    The first step it's a run sample from RAD Studio that named SensorInfo on your device. On the tab Bi ...

  9. HTML5和CSS3实例教程 中文版 高清PDF扫描版

    HTML5和CSS3实例教程共分3部分,集中讨论了HTML5和CSS3规范及其技术的使用方法.首先是规范概述,介绍了新的结构化标签.表单域及其功能(包括自动聚焦功能和占位文本)和CSS3的新选择器.接 ...

  10. 关于MultiDataTrigger和MultiTrigger的一些注意事项

    他俩有着相同的语法. 都是在conditions中编写触发条件. 因为都是同一个触发类. 在conditions中有Property和Binding这两个属性.那么这两个可以同时使用吗?当然是不可以的 ...