html5實(shí)現(xiàn)多文件的上傳示例代碼
發(fā)布時(shí)間：2014-02-13 15:22:02 作者：佚名 
我要評(píng)論
我要評(píng)論多文件的上傳在以前或許實(shí)現(xiàn)起來(lái)會(huì)很復(fù)雜，不過(guò)自從html5的出現(xiàn)，讓其變得非常容易，下面有個(gè)不錯(cuò)的示例，大家可以參考下
主要用到的是<input>的multiple屬性
<input type="file" name="multipleFileUpload" multiple />
下面是頁(yè)面的詳細(xì)代碼：
<!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="重設(shè)">
</form>
</body>
</html>
java后臺(tái)的詳細(xì)代碼：
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 ();//創(chuàng)建磁盤工廠
factory.setRepository(tmp);//設(shè)置文件緩存路徑
factory.setSizeThreshold(10 * 1096 );//將文件保存在內(nèi)存還是磁盤臨時(shí)文件夾的默認(rèn)臨界值，值為10240，即10kb
ServletFileUpload sfu=new ServletFileUpload(factory);//創(chuàng)建處理工具
sfu.setSizeMax(10*1024*1024);//服務(wù)器端可以接收的最大文件大小，-1表示無(wú)上限
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();
}
}
下面是效果圖：
復(fù)制代碼
代碼如下:<input type="file" name="multipleFileUpload" multiple />
下面是頁(yè)面的詳細(xì)代碼：
復(fù)制代碼
代碼如下:<!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="重設(shè)">
</form>
</body>
</html>
java后臺(tái)的詳細(xì)代碼：
復(fù)制代碼
代碼如下: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 ();//創(chuàng)建磁盤工廠
factory.setRepository(tmp);//設(shè)置文件緩存路徑
factory.setSizeThreshold(10 * 1096 );//將文件保存在內(nèi)存還是磁盤臨時(shí)文件夾的默認(rèn)臨界值，值為10240，即10kb
ServletFileUpload sfu=new ServletFileUpload(factory);//創(chuàng)建處理工具
sfu.setSizeMax(10*1024*1024);//服務(wù)器端可以接收的最大文件大小，-1表示無(wú)上限
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();
}
}
下面是效果圖：
相關(guān)文章
- 這篇文章主要介紹了HTML5拖拽文件上傳的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-03-04
這篇文章主要介紹了HTML5 拖拽批量上傳文件的示例代碼的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-28- 這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下2018-02-02
- HTML5 中提供的文件API在前端中有著豐富的應(yīng)用，上傳、下載、讀取內(nèi)容等在日常的交互中很常見。而且在各個(gè)瀏覽器的兼容也比較好，包括移動(dòng)端，除了 IE 只支持 IE10 以上的2017-07-03
- 本文簡(jiǎn)單介紹利用Html5的FormData實(shí)現(xiàn)文件的異步上傳，還可以實(shí)現(xiàn)上傳進(jìn)度條和文件大小驗(yàn)證等，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-05-19
- 本篇文章主要介紹了HTML5拖拉上傳文件的簡(jiǎn)單實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-11
使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
下面小編就為大家?guī)?lái)一篇使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-17移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】
下面小編就為大家?guī)?lái)一篇移動(dòng)端HTML5實(shí)現(xiàn)文件上傳功能【附代碼】。小編覺(jué)得聽錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-25HTML5實(shí)現(xiàn)同時(shí)選擇多個(gè)文件夾上傳的使用示例
HTML5的上傳API可以支持同時(shí)選擇多個(gè)文件和選擇單個(gè)文件夾，但不支持同時(shí)選擇多個(gè)文件夾，本文就來(lái)實(shí)現(xiàn)一下HTML5實(shí)現(xiàn)同時(shí)選擇多個(gè)文件夾上傳的使用示例，具有一定的參考價(jià)2023-09-28
