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 ...
随机推荐
- jqgrid 编辑表格（包含下拉框）
.1在jqgrid 按钮 <asp:JQGridColumn TextAlign=" DataField="act" Visible="True" ...
- 手打的table
突然觉得,如果我不上传源码和写篇博客,对不起花在这个破网页2个小时的时间,完全手打,浏览器调效果. 源码如下: a.html: <!DOCTYPE html PUBLIC "-//W3 ...
- Requests接口测试(一)
接口测试概念 接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点.测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关 ...
- 解决jquery操作checkbox火狐下第二次无法勾选问题
最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代 ...
- eclipse启动了tomcat，但是浏览器打不开欢迎页
tomcat在eclipse中启动成功,主页却打不开 症状: tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他 ...
- XE下 SVG格式的图标使用方法
下载一个SVG格式的图标,千图网,http://tool.58pic.com/tubiaobao/ 用txt文本打开SVG图标 拖一个PathLabel控件 在PathLabel控件的Data属性添加 ...
- 吐槽一下wp toolkit ToggleSwitch控件
之前用法: <toolkit:ToggleSwitch> <toolkit:ToggleSwitch.Header> <TextBlock Text="2323 ...
- C# 属性与字段
属性和字段的区别: 属性是逻辑字段,是字段的扩展,并不占用实际的内存:而字段占用内存空间. 属性可以被其他类访问:而非public的字段不能被直接访问. 属性可以对接受的数据在范围上做限定:而字段不能 ...
- LOJ#10172. 「一本通 5.4 练习 1」涂抹果酱
题目链接:https://loj.ac/problem/10172 题目描述 Tyvj 两周年庆典要到了,Sam 想为 Tyvj 做一个大蛋糕.蛋糕俯视图是一个 N×MN×MN×M 的矩形,它被划分成 ...
- 微信H5或PC支付常见问题汇总
1.H5端调起支付,直接提示[支付失败],打印具体的信息,“<当前URL不存在>” 原因: ①.[支付授权目录不对]---查看微信商户平台的支付授权目录的地址,如果MVC结构的,则只需填写 ...