多文件预览上传基于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();
    }

多文件预览上传基于Struts

多文件预览上传基于Struts

猜你喜欢