html5实现多文件的上传示例代码
程序员文章站
2023-11-17 15:01:16
多文件的上传在以前或许实现起来会很复杂，不过自从html5的出现，让其变得非常容易，下面有个不错的示例，大家可以参考下... 14-02-13...
主要用到的是<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();
}
}
下面是效果图：
复制代码
代码如下:<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教程制作简单画板代码分享