多文件预览上传基于Struts

不念不忘少年蓝@ 2022-08-21 14:46 259阅读 0赞

# 多文件预览上传基于Struts #

实现多文件预览，多文件上传，基于struts，使用jquery实现，逻辑简单转化为js等方便。

*  页面代码

<html>
    <head>
    <link href="../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../css/addstyle.css" rel="stylesheet" type="text/css">
    <script language="javascript" src="../../js/jquery-1.4.2.min.js"></script>
    <title>上传任意多个文件</title>
            <script language="javascript"> // 在DOM中插入一个上传文件列表项（div元素)和一个<input type="file"/>元素 function insertNextFile(obj) { // 获取上传控制个数 var childnum = $("#files > input").size(); var id = childnum - 1 ; var fullName = obj.value; var fileHtml = ""; var files_preview = "files_preview"+id; fileHtml += "<tr id = 'files_preview"+ id +"'><td width='25%' align='center'>" + (id + 1) + "</td><td width='50%' align='center'>" + fullName.substr(fullName.lastIndexOf("\\")+1) + "</td>"; fileHtml += "<td width='25%' align='center'><a href='javascript:void(0)' onclick='javascript:removeFile(" + id + ")' >删除</a>"; fileHtml += "</td> </tr>"; $("#files_preview").append(fileHtml); obj.style.display = 'none'; // 隐藏当前的<input type=”file”/>元素 addUploadFile(childnum); // 插入新的<input type=”file”/>元素 } // 插入新的<input type=”file”/>元素，适合于不同的浏览器（包括IE、FireFox等） function addUploadFile(index) { $("#files").append("<input type='file' id='file_" + index + "' name='file[" + index + "]' onchange='insertNextFile(this)'/>"); } function removeFile(index) // 删除当前文件的<div>和<input type=”file”/>元素 { $("#files_preview"+index).remove(); $("#file_"+index).remove(); if($("#files > input").size() == 1){ $("#files > input:eq(0)").attr("name","file["+0+"]"); $("#files > input:eq(0)").attr("id","file_"+ 0); } var $ttr = $("#files_preview tr:not(:first)").detach(); $ttr.each(function(i){ var vid = $(this).attr("id"); var vidnum = vid.substring(13); $("#file_"+vidnum).attr("name","file["+i+"]"); $("#file_"+vidnum).attr("id","file_"+i); $(this).children("td:eq(0)").html(i + 1); $(this).children("td:last").empty(); // $(this).children("td:last a:first").attr("href","javascript:removeFile('"+i+"');"); var aHtml = "<a href='javascript:void(0)' onclick='removeFile(" + i + ")' >删除</a>"; $(this).children("td:last").append(aHtml); $(this).attr("id","files_preview"+i); }); $("#files_preview").append($ttr); var childnum = $("#files > input").size(); $("#files > input:last").attr("name","file["+(childnum - 1)+"]"); $("#files > input:last").attr("id","file_"+(childnum - 1)); } function showStatus(obj) // 显示“正在上传文件”提示信息 { $("#status").css("visibility","visible"); } </script>
    </head>
    
    <body>     
    <html:form enctype="multipart/form-data" action="/ins/complaintNew/NewUploadFileAction.do" method="post">
    <input type="hidden" name="method" />
                <span id="files" > <%-- 在此处插入用于上传文件的input元素 --%> 
                   <input type="file" id="file_0" name="file[0]" onchange="insertNextFile(this)" /> </span>
                   <html:submit value=" 上传 " onclick="showStatus(this);" />
            </html:form>
            <p>
            <div id="status" style="visibility: hidden; color: Red" >
                正在上传文件
            </div>
            <p>
            <table id ="files_preview" width="100%" border="1" cellpadding="0" cellspacing="1" ><tr ><td width="25%" align="center">序号</td><td width="50%" align="center">上传文件名称</td><td width="25%" align="center">删除</td></tr>
    
            </table>
      </body>
      </html>

*  action类关键代码片段

NewComplaintBaseForm fm = (NewComplaintBaseForm) form;
        int count = fm.getFileCount();   // 获得上传文件的总数 
        for (int j = 0; j < count; j++)  {
    int fileMxsize = Integer.parseInt(listFtp.get(3).toString());
    FormFile file = fm.getFile(j); 
    String fileNme=file.getFileName();
    // 判断文件大小
    int flength = fileMxsize * 1024;
    int ok = (int) file.getFileSize() / 1024;
    if (ok > flength) {
    System.out.println("上传文件" + fileNme + "失败");
                                request.setAttribute("message", "上传的文件大小为：" + ok+ "kb,超过最大限度"+fileMxsize+"M,不允许上传 ");                           request.setAttribute("newFileNme", "");                         
                            }
                        }
    for (int i = 0; i < count; i++)  
    {  
    FormFile file = fm.getFile(i);   
     stream = file.getInputStream();
     String fileNme=file.getFileName();
    String newFileNme=file.getFileName();
    int pos=newFileNme.lastIndexOf(".");                                                      
                            } 
    System.out.println("上传文件"+showfileNm+"成功");

*  form关键代码片段

private Long fileId;
        private String fileName;
        private String newFileName;
        private String fileUploadUser;
        private String fileUploadTime;
        // 用于保存不定数量的FormFile对象
        private List<FormFile> myFiles = new ArrayList<FormFile>();
        public FormFile getFile(int i)  // 索引属性
        {
            return myFiles.get(i);
        }
        public void setFile(int i, FormFile myFile)  // 索引属性
        {
            if (myFile.getFileSize() > 0)  // 只有上传文件的字节数大于0，才上传这个文件
            {
                myFiles.add(myFile);
            }
        }
        public int getFileCount()  // 获得上传文件的个数
        {
            return myFiles.size();
        }