多檔案預覽上傳基於Struts

阿新 • • 發佈：2018-12-25

多檔案預覽上傳基於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 實現多檔案預覽，多檔案上傳，基於struts，使用jquery實現，邏輯簡單轉化為js等方便。頁面程式碼 <html> <head> <link href="../../css/style.css

bootstrap多檔案預覽上傳

效果圖展示：使用環境：檔案上傳外掛：bootstrap-fileinput,文件地址 http://plugins.krajee.com/file-input#pre-requisites 前段ui框架：bootstrap3 ja

H5實現多圖片預覽上傳，可點選可拖拽控制元件介紹

在做圖片上傳時發現一個蠻好用的控制元件，支援多張圖片同時上傳，可以點選選擇圖片，也可以將圖片拖拽到上傳框直接上傳，方便，好用，介面也簡單，基本可以直接放到專案裡使用。先看看他的樣式：選擇圖片後

頁面預覽上傳檔案的內容

功能介紹：網站通常通過file型別的標籤進行檔案的上傳，檔案為客戶端任意位置（桌面、C盤、D盤……）的檔案。有時，需求需要在檔案上傳到伺服器之前，在頁面的某區域顯示檔案的內容。這在過去的技術中，是很

HTML5使用FileReader預覽上傳的圖片檔案

<div class="form-group control-label"> <div class="col-sm-2 co

input預覽上傳圖片

fun null files defined obj cnblogs div object style html代碼 <input type="file" name="file" id="file" > <img src="" id="img">

js預覽上傳圖片

輸出 rip BE hang gin filter gid onchange QQ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="te

jquery ajax 多檔案Excel解析上傳

------jsp 前臺-------------------- <form id="importOrderFrom" name="importOrderFrom" method="post" enctype="multipart/form-data">&nb

bootstrap+fileinput外掛實現可預覽上傳照片功能

圖片.png實際專案中運用：圖片.png功能：實現上傳圖片，更改上傳圖片，移除圖片的功能<!DOCTYPE html><html> <head> <metacharset="UTF-8"> <tit

bootstrap圖片剪裁預覽上傳

效果圖預覽：用到的圖片剪裁外掛：http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html 前段ui框架：bootstrap3 java後端框架：spring + mybstis 說明：如果前端ui用的不是

關於微信小程式預覽上傳藍屏的問題

我在使用微信小程式開發的時候，使用了wxparse這個外掛。每次使用都會發現，只要預覽就會藍屏，一開始以為是檔名shutdown造成的，結果發現改了名字還是不行。後來發現是這個表情包造成的。就是emojis這個資料夾。裡面全是表情包。在上傳的時候，可能這個表情包檔案太大了。導

Javascript與asp.net 實現Ajax多檔案無重新整理上傳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

使用百度webuploader外掛進行多檔案型別分片上傳例項

jQuery(function() { function e(e) { var a = o('<li id="' + e.id + '"><p class="title">' + e.name + '</p><p cl

Bootstrap fileInput多檔案同步非同步上傳(C#)

網上關於該控制元件的使用文章還是比較多的，但是自己實踐和使用過程中還是出現點問題，自己寫點東西記錄下。簡單說，該控制元件優勢支援同步、非同步上傳，介面美觀所需css\js包，自尋尋找 bootstrap.css fileinput.css fileinput.mi

html簡單的多檔案預覽

html5中的檔案操作 fileReader:讀取檔案 readAsText():讀取文字返回字串值 readAsBinaryString():讀

基於“formData批量上傳的多種實現” 的多圖片預覽、上傳的多種實現 formData批量上傳的多種實現

　　前言　　圖片上傳是web專案常見的需求，我基於之前的部落格的程式碼（請戳：formData批量上傳的多種實現）裡的第三種方法實現多圖片的預覽、上傳，並且支援三種方式新增圖片到上傳列表：選擇圖片、複製貼上圖片、滑鼠拖拽圖片，同時支援從上傳列表中移除圖片（點選“X”號）　　　　效果演示　　選擇

HTML5中file方法上傳檔案預覽示例

效果圖如下：程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s

移動端HTML5 檔案預覽及上傳

本文主要介紹使用HTML5 圖片上傳及上傳前的預覽。本人是做PHP後端的，由於前端有時也需要自己寫，有空就研究了下圖片上傳預覽，寫的都是原生程式碼，廢話不多說，直接上程式碼。前端程式碼 <!DOCTYPE html> <html lang

js之上傳文件多圖片預覽

multi AD lec TE ros oat F5 不能 range 多圖片上傳預覽功能也是現在非常常用的下面是html代碼: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

Java 下載工具類(多檔案打包下載, 單檔案下載, 單檔案預覽)

1. 準備標準檔案類DocumentOModel @Data @ApiModel("文件資訊(轉換後)") public class DocumentOModel { @ApiModelProperty( value = "文件ID",

多檔案預覽上傳基於Struts

多檔案預覽上傳基於Struts

相關推薦