JS+Struts2多文件上传完整示例 -

simgsg

浏览: 96026 次
性别:
来自: 北京

最近访客更多访客>>

yf2000

l544295719

tjmljw

marsiii

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (116)

社区版块

存档分类

JS+Struts2多文件上传完整示例

1、JSP页面：
JS控制增加删除多个上传文件框，代码如下：

Java代码 
<%@ 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" style="display: none;">   
                        <td>   

                            <input type="file" size="50" name="uploadFile"  

                                onchange="isValidateFile(this);" />   
                            &nbsp;   

                            <input type="button" value="删除" />   
                        </td>   
                    </tr>   

                    <tr id="op">   
                        <td>   

                            <input type="submit" id="uploadbutton" value="上传" />   
                            &nbsp;   

                            <input type="button" value="添加" id="addbutton"  

                                onClick="addFileComponent();" />   
                            &nbsp;   
                        </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后台处理上传文件：

Java代码 
        //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代码如下：

Java代码 
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;   
    }   
  
}