溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何在JavaScript中使用Struts2實現多文件上傳，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、JSP頁面：
JS控制增加刪除多個上傳文件框，代碼如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../../_head.html"%>
<title>文件上傳</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script language="javascript" type="text/javascript"
src="../js/common/common.js"></script>
<script type="text/javascript">
var pos = 1;
function addFileComponent() {
var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
var elTr = document.getElementById('fileTr');
var elTr2 = document.getElementById('op');
var newEleTr = elTr.cloneNode(true);
newEleTr.id = "fileTr" + pos;
newEleTr.style.display = "";
inputs = newEleTr.getElementsByTagName('input');
inputs[0].id="file" + pos;
var elInput = inputs[1];
elInput.onclick=delFileComponent;
elInput.id="delbutton" + pos++;
elTable.insertBefore(newEleTr, elTr2);
}
function delFileComponent() {
var elTable = document.getElementById('uploadTable').getElementsByTagName('tbody')[0];
var trArr = elTable.getElementsByTagName("tr");
var el = event.srcElement;
for(j = 0; j < trArr.length; j++) {
tr = trArr[j];
if(tr.getElementsByTagName("input")[1] == el) {
elTable.removeChild(tr);
pos--;
break;
}
}
}
function isValidateFile(obj){
var extend = obj.value.substring(obj.value.lastIndexOf(".")+1);
if(extend==""){
}else{
if(!(extend=="xls"||extend=="doc")){
alert("請上傳后綴名為xls或doc的文件!");
var nf = obj.cloneNode(true);
nf.value='';
obj.parentNode.replaceChild(nf, obj);
return false;
}
}
return true;
}
</script>
</head>
<body>
<%@ include file="/common/message.jsp"%>
<div class="body-box">
<div class="rhead">
<div class="rpos">
文件上傳(可同時上傳多份文件)
</div>
<div class="clear"></div>
</div>
<s:form id="ops" action="csc_mUploadFile" theme="simple"
cssClass="rhead" enctype = "multipart/form-data">
<table id="uploadTable" width="100%" border="0">
<tr>
<td>
<input type="file" id="file0" name="uploadFile" size="50"
onchange="isValidateFile(this);" />
</td>
</tr>
<tr id="fileTr" >
<td>
<input type="file" size="50" name="uploadFile"
onchange="isValidateFile(this);" />
<input type="button" value="刪除" />
</td>
</tr>
<tr id="op">
<td>
<input type="submit" id="uploadbutton" value="上傳" />
<input type="button" value="添加" id="addbutton"
onClick="addFileComponent();" />
</td>
</tr>
</table>
</s:form>
<table class="pn-ltable" width="100%" cellspacing="1" cellpadding="0"
border="0">
<thead class="pn-lthead">
<tr>
<th>
序號
</th>
<th>
文件名
</th>
<th>
上傳時間
</th>
</tr>
</thead>
<tbody class="pn-ltbody">
<tr onmouseover="Pn.LTable.lineOver(this);"
onmouseout="Pn.LTable.lineOut(this);"
onclick="Pn.LTable.lineSelect(this);">
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>2、Action后臺處理上傳文件：
//uploadFile對應頁面<input type="file" name="uploadFile">
private List<File> uploadFile;
//文件名對應uploadFile+“FileName”，要不獲取不到文件名
private List<String> uploadFileFileName;
// 文件上傳
public String mUploadFile() {
if (null == uploadFile) {
this.addActionError("請上傳文件!");
} else {
String fileName = "";
try {
//在自己代碼中控制文件上傳的服務器目錄
String directory = ServletActionContext.getServletContext().getRealPath("/uploads");
//判斷該目錄是否存在，不存在則創建
FileUtil.makeDir(directory);
//循環處理上傳的文件
for(int i=0,j=uploadFile.size();i<j;i++){
fileName = uploadFileFileName.get(i);
String filePath = directory + File.separator + fileName;
FileUtil.uploadFile(uploadFile.get(i), new File(filePath));
}
} catch (IOException e) {
this.addActionMessage("");
}
this.addActionMessage("文件上傳成功!");
}
return "fileUpload";
}FileUtil代碼如下：
public class FileUtil {
private static final int BUFFER_SIZE = 16 * 1024;
public static void uploadFile(File src, File dst) throws IOException {
InputStream in = null;
OutputStream out = null;
try {
in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
out = new BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
byte[] buffer = new byte[BUFFER_SIZE];
while (in.read(buffer) > 0) {
out.write(buffer);
}
} finally {
if (null != in) {
in.close();
}
if (null != out) {
out.close();
}
}
}
public static String getExtention(String fileName) {
int pos = fileName.lastIndexOf(".");
return fileName.substring(pos);
}
public static void makeDir(String directory) {
File dir = new File(directory);
if (!dir.isDirectory()) {
dir.mkdirs();
}
}
public static String generateFileName(String fileName)
throws UnsupportedEncodingException {
DateFormat format = new SimpleDateFormat("yyMMddHHmmss");
String formatDate = format.format(new Date());
String extension = fileName.substring(fileName.lastIndexOf("."));
fileName = new String(fileName.getBytes("iso8859-1"), "gb2312");
return fileName + "_" + formatDate + new Random().nextInt(10000)
+ extension;
}
}關于如何在JavaScript中使用Struts2實現多文件上傳就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
