html5实现多文件的上传示例代码


Posted in HTML / CSS onFebruary 13, 2014

主要用到的是<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实现多文件的上传示例代码
HTML / CSS 相关文章推荐
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 #HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 #HTML / CSS
html5画布旋转效果示例
Jan 27 #HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 #HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 #HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 #HTML / CSS
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python入门教程之识别验证码
2017/03/04 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
PyTorch的torch.cat用法
2020/06/28 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
python爬取代理ip的示例
2020/12/18 Python
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
公司企业表扬信
2014/01/11 职场文书
中学生检讨书范文
2014/11/03 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
初一英语教学反思
2016/02/15 职场文书