HTML5实现多文件的上传示例代码
[转自] 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实现多文件的上传示例代码的更多相关文章
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- php产品细节图多图上传示例代码 无刷新
前台文件代码 upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- HTML5+J2EE实现文件异步上传
P.S. HTML5经过了W3C的8年努力,终于正式推广了.这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?).这个对象现 ...
- html5+php实现文件拖动上传功能
界面样式我是参考了一个国外的相册网站,改动不大,只是把鸟语转换成中文,以及上传时的样式也进行了改动,之所以选这个的原因就是,我很容易做扩展,它支持3种方式添加图片,一种拖拽上传,一种常规的选择文件上传 ...
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- 基于struts2框架文件的上传与下载
在开发一些社交网站时,需要有允许用户上传自己本地文件的功能,则需要文件的上传下载代码. 首先考虑的是文件的储存位置,这里不考虑存在数据库,因为通过数据库查询获取十分消耗资源与时间,故需将数据存储在服务 ...
- HTML5 文件异步上传 — h5uploader.js
原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...
- 【转载】兼容php5，php7的cURL文件上传示例
转载来自: http://www.huanlinna.com/2016/06/25/coding/php5-php7-upload-demo-via-curl.html https://segment ...
- [html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
随机推荐
- 在线创建MongoDB免费集群（MangoDB Atlas）
MongoDB Atlas是MongoDB的云服务,构建在亚马逊的AWS上,MongoDB允许用户在上面创建一个免费集群作为学习使用. 1. 注册MongoDB cloud账号: 访问www.mong ...
- 数据预处理 center&scale&box-cox
http://stackoverflow.com/questions/33944129/python-library-for-data-scaling-centering-and-box-cox-tr ...
- JSON不对称反序列化映射方案
源码Git地址: https://github.com/git-simm/simm-framework.git (欢迎大家提交优化代码 ^_^) 一.业务场景 公司先有业务系统,后来觉得需要抽离公共的 ...
- Html5-Video标签以及字幕subtitles和captions的区别
<video id="mainvideo" src="video.mp4" type="video/mp4"controls auto ...
- Machine Learning and Data Mining（机器学习与数据挖掘）
Problems[show] Classification Clustering Regression Anomaly detection Association rules Reinforcemen ...
- wpf控件开发基础
wpf控件开发基础(3) -属性系统(2) http://www.cnblogs.com/Clingingboy/archive/2010/02/01/1661370.html 这个有必要看看 wpf ...
- 第一章：HTTP服务器，客户端简易代码解析
HTTP服务器: 方法{ main service } service:读取HTTP请求信息 解析HTTP请求 决定HTTP相应正文的类型 创建HTTP相应结果 发送HTTP相应结果 读 ...
- ping包，支持ip录入
@echo off ::等待用户输入需要监控IP set /p ip=Input the IP required to monitor: echo executing...... :start ech ...
- [转]Replace all UUIDs in an ATL COM DLL.
1. Introduction. 1.1 Recently, a friend asked me for advise on a very unusual requirement. 1.2 He ne ...
- Linux中，关闭selinux
首先我们可以用命令来查看selinux的状态getenforce 这个命令可以查看到selinux的状态,当前可以看到是关闭状态的. 还有一个命令也可以查看出selinux的状态.sestatus - ...