直接帖上代码,对于添加事件,这里有两行代码是重点:
fileObj.onchange = function(){checkFileSuffix()};
delObj.onclick = function(){delInputFile(delObj)};
//通过这种方式为onclick指定事件,不会直接执行delInputFile(delObj)方法,如果使用delObj.onclick = delInputFile(delObj);会直接执行delInputFile(delObj);方法,且指定的事件无效。
<%--
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" οnchange="checkFileSuffix()" name="file1" id="file1" size="40" maxlength="20"> <input id="btnAdd" οnclick="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" οnclick="uploading();" disabled/>
<input type="button" id="ResetButton" value="Reset" οnclick="reseting();"/>
</TD>
<TD> </TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD> </TD>
</TR>
</TBODY>
</table>
</form>
</body>
</html>