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垂直手风琴菜单
Jun 28 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
解读Django框架中的低层次缓存API
2015/07/24 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python 全局变量的import机制介绍
2017/09/07 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
借款协议书
2014/09/16 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
校友会致辞
2015/07/30 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
物业管理交接协议书
2016/03/24 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
日元符号 ¥
2022/02/17 杂记
尝试使用Python爬取城市租房信息
2022/04/12 Python