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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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 递归效率分析
2009/11/24 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
ie 调试javascript的工具
2009/04/29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JavaScript switch语句使用方法简介
2019/12/30 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python中join函数简单代码示例
2018/01/09 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Django数据统计功能count()的使用
2020/11/30 Python
Python基于Faker假数据构造库
2020/11/30 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
租房协议书范本
2014/04/09 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
计划生育诚信协议书
2014/11/02 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
实习证明模板
2015/06/16 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js