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 ...
随机推荐
- Windows下用Nginx配置遇到的问题
Nginx是一款轻量级的web服务器/反向代理服务器,更详细的释义自己百度了.目前国内像新浪.网易等都在使用它.先说下我的服务器软件环境: 系统:Windows Server + IIS + ngin ...
- python3--生成器并行运算
# Auther: Aaron Fan """def consumer(name): print("%s 准备吃包子啦!" % name) while ...
- spark源码阅读之network(3)
TransportContext用来创建TransportServer和TransportclientFactory,同时使用TransportChannelHandler用来配置channel的pi ...
- 《the art of software testing》 第三章 人工测试
在深入研究较为传统的计算机测试技术之前,要先进行"人工测试". 代码检查与走查是两种主要的人工测试方法. 代码检查与走查是对过去桌面检查过程(在提交测试前由程序员阅读自己程序的过程 ...
- LibreOJ 6279 数列分块入门 3(分块+排序)
题解:自然是先分一波块,把同一个块中的所有数字压到一个vector中,将每一个vector进行排序.然后对于每一次区间加,不完整的块加好后暴力重构,完整的块直接修改标记.查询时不完整的块暴力找最接近x ...
- 获取下标实现导航切换jquery代码
var lis = $(".proDetail_contentnav li");for(var i = 0; i < lis.length; i++) { lis[i].in ...
- Hackfive 使用TextSwitcher和ImageSwitcher实现平滑过渡
1. 应用场景: 通过向左和向右的导航按钮浏览日期列表 在日期选择空间中改变日期 倒计时始终 新闻刚要 2.用到的知识点是: TextSwitcher和ImageSwitcher Te ...
- HackOne
使用 weight 属性实现视图的居中显示 一.在开发中有时候会遇到将一个控件在父控件居中显示.但是如果你直接用margin_*来进行限制的话就可能造成对于不同的型号的手机又不同显示的格式. 所以就可 ...
- 一个简单的tcp代理实现
There are a number of reasons to have a TCP proxy in your tool belt, bothfor forwarding traffic to b ...
- Intellij IDEA神器那些让人爱不释手的小技巧
完整的IDEA使用教程,GitHub地址: https://github.com/judasn/IntelliJ-IDEA-Tutorial 概述 之前写了一篇介绍IntellIJ IDEA的文章 ...