[转自] 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. python 添加日期

    import pandas as pd applydata['apply_time'] = pd.to_datetime(applydata.apply_time)# applydata.apply_ ...

  2. Jlabel实现内容自动换行

    Jlabel实现内容自动换行 摘自:https://blog.csdn.net/zhhtao89/article/details/50179695   2015年12月04日 21:09:27 阅读数 ...

  3. ServletContext作用功能详解.RP

    ServletContext ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而s ...

  4. M(必备)，R（需求），C（条件），O（可选）

    M:must 必备 R:request 需求 C:condition 条件 O:option 可选 AFL:application file locator 应用文件定位器 PKI:公钥索引 IPK: ...

  5. IDEA+DevTools实现热部署功能

      开发IDE: Intellij IDEA 2018.1 SpringBoot:1.5.9.RELEASE 热部署 大家都知道在项目开发过程中,常常会改动页面数据或者修改数据结构,为了显示改动效果, ...

  6. Fiddler 教程之：Fiddler捕获会话

    1 Fiddler的工作原理 Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888.当Fiddler退出的时候它会自动注销,这样就不会影响别的程序.不过 ...

  7. Linux下为Eclipse安装hadoop插件

    前提条件:在Linux系统中已经安装好了jdk和hadoop 本文的安装环境:1.arch Linux 2. hadoop1.0.1本地伪分布模式安装  3. Eclipse 4.5 1. 下载Ecl ...

  8. Spring MVC：Model、View、ModelAndView

    个人理解:View为服务器上的某个文件容器,可以为JSP,FTL等动态页面文件,甚至是媒体文件等等,单单是一个文件.Model的作用是存储动态页面属性,动态页面文件即View可以在Model中获取动态 ...

  9. spring的一些配置和重要的接口和类

    spring的配置文件 通常是applicationContext.xml(具体的bean配置会在后面内容中详解) setter方法注入: <property name=“” value=“ja ...

  10. android 透明弹出搜索框

    1.在QQ一些APP当中有是弹出一个半透明的搜索框的,其实这种效果就是很多种方法,自定义一个Dialog,或者直接将activity的背景变成半透明的也可以的. 下面就是将activity变成半透明的 ...