struts動態多檔案上傳實現

qking93415981發表於2020-04-06

 

 

 

能同時上傳單個檔案或多個檔案並建立資料夾,可以任意增減檔案數目,執行結果

//action

package upload.multi;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.upload.FormFile;

public class MultiUploadAction extends Action {
    
    
public ActionForward execute(ActionMapping mapping, ActionForm form,
                                 HttpServletRequest request,
                                 HttpServletResponse response) {
        MultiUploadForm multiUploadForm 
= (MultiUploadForm) form;
        List myFiles 
= multiUploadForm.getMyFiles();
        
try{
           
            
for(int i =0;i<myFiles.size();i++){
                UploadFile uploadFile 
= (UploadFile)myFiles.get(i);
                FormFile file 
= uploadFile.getFile(); 
    
                
if(file==null){
                    System.out.println(
"file is null");
                }
else
    
                    
//能執行到這裡,就可以使用單個檔案上傳的方法進行上傳了。迴圈而已
                    System.out.println("filename:::" + file.getFileName());
                    System.out.println(
"file size:::" + file.getFileSize());
                }
            } 
    
        }
catch(Exception e){
            e.printStackTrace();
        }
        
return null;
    }


//form

package upload.multi;

import java.util.ArrayList;
import java.util.List;

import org.apache.struts.action.ActionForm;

public class MultiUploadForm extends ActionForm {
    
private List myFiles;

    
public MultiUploadForm() {
        myFiles 
= new ArrayList();
        
//為了能夠在頁面初始顯示一個file
        myFiles.add(new UploadFile());
    }

    
public List getMyFiles() {
        
return myFiles;
    }

    
//注意這個方法的定義 

    
public UploadFile getUploadFile(int index) {

        
int size = myFiles.size();
        
if (index > size - 1) {
            
for (int i = 0; i < index - size + 1; i++) {
                myFiles.add(
new UploadFile());
            }
        }
        
return (UploadFile) myFiles.get(index);
    }

    
public void setMyFiles(List myFiles) {
        
this.myFiles = myFiles;
    }
}

//fuplodile

 

package upload.multi;

import java.io.Serializable;

import org.apache.struts.upload.FormFile;

public class UploadFile implements Serializable {
    
private FormFile file;
    
public FormFile getFile() {
        System.out.println(
"run in uploadFile.getFile()");
        
return file;
    }
    
public void setFile(FormFile file) {
        
this.file = file;
    }
}

 //jsp

<%@ page contentType="text/html; charset=GBK"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested"%>

<html>
<head>
    
<title>multiUploadDemo</title>
</head>
<script language="javascript" >
    
function addFile(){
        
var Rows=tableFiles.rows;//類似陣列的Rows 
        var newRow=tableFiles.insertRow(tableFiles.rows.length);//插入新的一行 
         var Cells=newRow.cells;//類似陣列的Cells 
        var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
        newCell.align
="center"
        newCell.innerHTML
= "<input type=file name=uploadFile["+ (tableFiles.rows.length-1+ "].file value=''/>"
    }

    
function delFile(){
        
if (tableFiles.rows.length > 1){ 
            tableFiles.deleteRow(tableFiles.rows.length
-1); 
        }
    }  
     
    
function deleteOtherFiles(){
        
while(tableFiles.rows.length > 1){ 
            tableFiles.deleteRow(tableFiles.rows.length
-1); 
        }
    }
   
function setAddDelBtnDisplay(){
           
var objChkFolder = document.getElementById("chkUploadFolder");
           
var objBtn = document.getElementById("RowAddDelBtn");
           
if(objChkFolder.checked){
               objBtn.style.display
="";
           }
else{
            deleteOtherFiles();
               objBtn.style.display
="none";
           }
  }
   
   
function upload(){
     multiUploadForm.submit();
   }
</script>
<body bgcolor="#ffffff">
    
<html:form method="post" action="/multiUploadAction.do" enctype="multipart/form-data">
        
<table border="1">
            
<TBODY>
            
<tr>
                
<td>
                    上傳檔案(
<input name="chkUploadFolder" type="checkbox" onclick="setAddDelBtnDisplay();"/>資料夾)
                
</td>
            
</tr>
            
<tr>
                
<td>
                    
<table id="tableFiles">
                        
<nested:iterate id="uploadFile" property="myFiles"  name="multiUploadForm" indexId="index">
                            
<nested:nest property="uploadFile">
                                
<tr>
                                    
<td>
                                        
<nested:file property="file" name="uploadFile" indexed="true" />
                                    
</td>
                                
</tr>
                            
</nested:nest>
                        
</nested:iterate>
                    
</table>
                
</td>
            
</tr>
            
<TR id ="RowAddDelBtn" style="display: none;">
                
<td align="center">
                    
<table>
                        
<tr>
                            
<td>
                                資料夾名:
<input type="text" name="folderName" size="10"/>
                            
</td>
                            
<td>
                                
<input type="button" name="btnAddFile" value="Add File" onclick="addFile()" />
                            
</td>
                            
<td>
                                
<input type="button" name="btnAddFile" value="Del File" onclick="delFile()" />
                            
</td>
                        
</tr>
                    
</table>
                
</td>
            
</TR>
            
<TR>
                
<td>
                    
<input type="button" name="btnUpload" value="upload" onclick="upload()">
                
</td>
            
</TR>
            
</TBODY>
        
</table>
    
</html:form>
</body>
</html>

//config

 

<%@ page contentType="text/html; charset=GBK"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested"%>

<html>
<head>
    
<title>multiUploadDemo</title>
</head>
<script language="javascript" >
    function addFile(){
        var Rows=tableFiles.rows;//類似陣列的Rows 
        var newRow=tableFiles.insertRow(tableFiles.rows.length);//插入新的一行 
         var Cells=newRow.cells;//類似陣列的Cells 
        var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
        newCell.align="center"; 
        newCell.innerHTML= "
<input type=file name=uploadFile["+ (tableFiles.rows.length-1) + "].file value=''/>"
    
}

    function delFile(){
        if (tableFiles.rows.length 
> 1){ 
            tableFiles.deleteRow(tableFiles.rows.length-1); 
        }
    }  
     
    function deleteOtherFiles(){
        while(tableFiles.rows.length > 1){ 
            tableFiles.deleteRow(tableFiles.rows.length-1); 
        }
    }
   function setAddDelBtnDisplay(){
           var objChkFolder = document.getElementById("chkUploadFolder");
           var objBtn = document.getElementById("RowAddDelBtn");
           if(objChkFolder.checked){
               objBtn.style.display="";
           }else{
            deleteOtherFiles();
               objBtn.style.display="none";
           }
  }
   
   function upload(){
     multiUploadForm.submit();
   }
</script>
<body bgcolor="#ffffff">
    
<html:form method="post" action="/multiUploadAction.do" enctype="multipart/form-data">
        
<table border="1">
            
<TBODY>
            
<tr>
                
<td>
                    上傳檔案(
<input name="chkUploadFolder" type="checkbox" onclick="setAddDelBtnDisplay();"/>資料夾)
                
</td>
            
</tr>
            
<tr>
                
<td>
                    
<table id="tableFiles">
                        
<nested:iterate id="uploadFile" property="myFiles"  name="multiUploadForm" indexId="index">
                            
<nested:nest property="uploadFile">
                                
<tr>
                                    
<td>
                                        
<nested:file property="file" name="uploadFile" indexed="true" />
                                    
</td>
                                
</tr>
                            
</nested:nest>
                        
</nested:iterate>
                    
</table>
                
</td>
            
</tr>
            
<TR id ="RowAddDelBtn" style="display: none;">
                
<td align="center">
                    
<table>
                        
<tr>
                            
<td>
                                資料夾名:
<input type="text" name="folderName" size="10"/>
                            
</td>
                            
<td>
                                
<input type="button" name="btnAddFile" value="Add File" onclick="addFile()" />
                            
</td>
                            
<td>
                                
<input type="button" name="btnAddFile" value="Del File" onclick="delFile()" />
                            
</td>
                        
</tr>
                    
</table>
                
</td>
            
</TR>
            
<TR>
                
<td>
                    
<input type="button" name="btnUpload" value="upload" onclick="upload()">
                
</td>
            
</TR>
            
</TBODY>
        
</table>
    
</html:form>
</body>
</html>

相關文章