做JSP中实现文件上传时,有时我们需要同时上传多个文件,下面是在JSP中动态添加文件选择框和按钮,并添加相关事件。

直接帖上代码,对于添加事件,这里有两行代码是重点:

fileObj.onchange = function(){checkFileSuffix()};
delObj.onclick = function(){delInputFile(delObj)};

通过这种方式为onclick指定事件,不会直接执行delInputFile(delObj)方法,如果使用delObj.onclick = delInputFile(delObj);会直接执行delInputFile(delObj);方法,且指定的事件无效。

下面是详细JSP代码:

<%--   
    Document   : multiFileUpload  
    Created on : 2012-11-13, 17:13:55  
    Author     : hualun-alan  
--%>  
  
<%@ page contentType="text/html" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF8">  
        <STYLE type="text/css">  
            BODY {  
                MARGIN: 0px  
            }  
            .style1 {  
                FONT-SIZE: 12px; FONT-FAMILY: Arial  
            }  
            .style3 {  
                FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #3c5e84; FONT-FAMILY: Arial  
            }  
            .style4 {  
                FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial  
            }  
            .style5 {  
                FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Arial  
            }  
        </STYLE>  
        <title>Upload Multi Figures</title>  
        <SCRIPT language=javascript type=text/javascript>  
            var fileIndex = 1;  
            function addFile() {  
                if(fileIndex>9){  
                    alert("Sorry!You can only upload 10 figures at a time!");  
                }else{  
                    fileIndex++;  
                    var idx = fileIndex;  
                    addInputFile(idx);  
                }  
            }  
              
            function checkFileSuffix(){  
                var throughCheck = true;  
                for(var i = 1; i <= fileIndex; i++){  
                    var inputComp = document.getElementById("file" + i);  
                    if(inputComp.value == null || inputComp.value == ""){  
                        continue;  
                    }  
                      
                    var fileExt = inputComp.value.substr(inputComp.value.lastIndexOf(".")).toLowerCase();  
                    if(!(fileExt == ".jpg" || fileExt == ".png" || fileExt == ".bmp" || fileExt == ".gif" || fileExt == ".svg" || fileExt == ".emf")){  
                        throughCheck = false;  
                    }  
                }  
                  
                var message = document.getElementById("message");  
                var UploadButton = document.getElementById("UploadButton");  
                if(!throughCheck){  
                    message.innerHTML = "<font style='font-family: Arial' color='red'>Please select a figure with type JPG/PNF/BMP/GIF/SVG/EMF!</font>";  
                    UploadButton.disabled=true;  
                }else{  
                    message.innerHTML = "<font style='font-family: Arial' color='green'>OK!</font>";  
                    UploadButton.disabled=false;  
                }  
            }  
              
            function addInputFile(idx) {  
                var span = document.getElementById("filespan");  
                if (span != null) {  
                    var divObj = document.createElement("div");  
                    divObj.id = "div"+idx;  
    
                    var fileObj = document.createElement("input");  
                    fileObj.type = "file";  
                    fileObj.id = "file"+idx;  
                    fileObj.name = "name"+idx;  
                    fileObj.onchange = function(){checkFileSuffix()};  
                    fileObj.size = "40";  
                    fileObj.maxlength = "20";  
                      
                    var delObj = document.createElement("input");  
                    delObj.id = "btn"+idx;  
                    delObj.type = "button";  
                    delObj.onclick = function(){delInputFile(delObj)};  
                    delObj.value = "Delete";  
                      
                    divObj.appendChild(document.createTextNode("Please select figure: "));  
                    divObj.appendChild(fileObj);  
                    divObj.appendChild(document.createTextNode(" "));  
                    divObj.appendChild(delObj);  
                    divObj.appendChild(document.createElement("br"));  
          
                    span.appendChild(divObj);  
                }  
            }  
  
            function delInputFile(obj) {  
                var idx = obj.id.substring(3);  
                var span = document.getElementById("filespan");  
                var divObj = document.getElementById("div"+idx);  
                if (span != null && divObj != null) {  
                    idx++;  
              
                    for(var i = idx; i <= fileIndex; i++){  
                        var inputComp1 = document.getElementById("file" + i);  
                        var inputComp2 = document.getElementById("btn" + i);  
                        var inputComp3 = document.getElementById("div" + i);  
                        i--;  
                        inputComp1.id = "file" + i;  
                        inputComp2.id = "btn" + i;  
                        inputComp3.id = "div" + i;  
                        i++;  
                    }  
                      
                    span.removeChild(divObj);   
                    fileIndex--;  
                    checkFileSuffix();  
                }  
            }  
  
            var bar=0;  
            var plot = ".";  
            var plots = "";  
            function uploading(){  
                document.getElementById('UploadButton').disabled = true;  
                document.getElementById('form1').submit();  
                count();  
            }  
  
            function reseting(){  
                document.getElementById("message").innerHTML = "";  
                document.getElementById('UploadButton').disabled = true;  
                document.getElementById('form1').reset();  
            }  
  
            function count(){  
                bar = bar+2;  
                plots = plots + plot;  
  
                if(bar>60){  
                    bar = 0;  
                    plots = "";  
                }  
  
                var message = document.getElementById('message');  
                message.innerHTML = "<font style='font-family: Arial' color='green'>Uploading, please wait..." + plots +"</font>";  
                setTimeout("count()",1000);  
            }  
        </script>  
    </head>  
    <body>  
        <%String url = "../../servlet/com.cc.das.userdata.UDEAddFiguresServlet?reqType=uploadMultiFigure";%>  
        <form enctype="multipart/form-data" name="form1" id="form1" method="post" action="<%=url%>">  
            <table>  
                <TBODY>  
                    <TR>  
                    <TD></TD>  
                    <TD width=700 height=20></TD>  
                    <TD></TD>  
                    </TR>  
  
                    <TR>  
                    <TD> </TD>  
                    <TD vAlign=top align=left>  
                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>  
                            <TBODY>  
                                <TR>  
                                <TD width="4%"> </TD>  
                                <TD width="92%" height=20> </TD>  
                                <TD width="4%"> </TD></TR>  
                                <TR>  
                                <TD> </TD>  
                                <TD height=25> <SPAN class=style3>Upload Multi Figures</SPAN></TD>  
                                <TD> </TD>  
                                </TR>  
                                <TR>  
                                <TD colspan="3" height="10"> </TD>  
                                </TR>  
                                <tr>  
                                <TD> </TD>  
                                <td id="filespan">  
                                    <div>  
                                        Please select figure: <input type="file" onchange="checkFileSuffix()" name="file1" id="file1" size="40" maxlength="20"> <input id="btnAdd" onclick="addFile()" type="button" value="Add More..."><br>  
                                    </div>  
                                </td>  
                                <TD> </TD>  
                                </tr>  
  
                                <TR>  
                                <TD> </TD>  
                                <TD align=center height=40>  
                                    <div id="message">  
                                        <%if ((request.getParameter("error")) != null && (request.getParameter("error")).equals("figureTooLarge")) {%>  
                                        <font color='red'>The current system accepts figure with maximum size 5 MB!</font>  
                                        <%}%>  
                                    </div>  
                                </TD>  
                                <TD> </TD>  
                                </TR>  
                                <TR>  
                                <TD> </TD>  
                                <TD align=center height=40>  
                                    <input type="button" id="UploadButton" value="Upload Figures" onclick="uploading();" disabled/>   
                                    <input type="button" id="ResetButton" value="Reset" onclick="reseting();"/>   
                                </TD>  
                                <TD> </TD>  
                                </TR>  
                            </TBODY>  
                        </TABLE>  
                    </TD>  
                    <TD> </TD>  
                    </TR>  
                </TBODY>  
            </table>  
        </form>  
    </body>  
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注