纯ＪＳ类似批量上传控件

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BatchUpLoad.ascx.cs" Inherits="WebUI.UserControls.BatchUpLoad" %> <style type="text/css"> .divAll{ background:#D4E3E7; margin-top:10px; height:100%;} .title{margin:8px;padding:3px; background:#FFFFFF; height:24px; font-size:14px; line-height:24px;} .content{margin:8px;padding:14px; background:#FFFFFF; height:100%; font-size:12px; text-align:left;} .contentLeft{width:250px;} .contentRight{margin-top:20px;width:65%;} .table{ border:solid 1px #8FBCCF; border-collapse:collapse; font-size:12px;} .table td{ border:solid 1px #8FBCCF;} .adjunctImg{margin-left:20px;} .aNode{margin-left:5px;margin-right:5px;} a{color:blue;text-decoration:underline;} #tabAdjunctContainer{ border:solid 1px #8FBCCF; border-collapse:collapse;width:80%; } #tabAdjunctContainer th{border:solid 1px #8FBCCF;line-height:25px; font-weight:bold;} #tabAdjunctContainer td{border:solid 1px #8FBCCF;line-height:25px;padding-left:5px; text-align:center;} </style> <input type="radio" onclick="switchPanel(this)" checked/><span id="spanDescription">隐藏上传附件面板</span> <div class="divAll" id="divUploadAdjunctPanel" style="display:block;"> <div class="title"> <img src="../images/attachment.gif" width="13" height="15" align="absmiddle">添加附件： </div> <div class="content"> <div id="divUploadControlContainer" class="contentLeft"> ＊点击可多次添加附件<br /> <input name="file" type="file" id="fileOld" onchange="fileChange(this)"/> </div> <br> <div class="contentRight"> <div id="divAdjunctList"> <table id="tabAdjunctContainer" border="0" cellpadding="0" cellspacing="0" > <tr> <th colspan="4">附件列表：</th> </tr> <tr> <td>编号</td> <td>附件名</td> <td>上传时间</td> <td>删除</td> </tr> </table> </div> <div style="margin-top:5px;"> 附件描述：<br> <textarea name="txtAreaRemark" id="txtAreaRemark" rows="3" cols="75" runat="server"> </textarea> <div style="margin-left:460px;margin-top:10px;"> <asp:Button id="btnImgUpLoad" runat="server" Text="上传附件" OnClick="btnImgUpLoad_Click"/> </div> </div> </div> <input type="text" id="txtSiteUrl" runat="server" style="display:none;"/> </div> <script> var adjunctCount = 0; if(document.forms.length!=0) { document.forms[0].enctype="multipart/form-data"; } else { //alert("未设置表单无素，该页面无法实现批量上传！"); } ///用于此时获取附件的个数，默认会有个空的附件，所以说当附件的数目大于一的时候才上传了附件 function checkAdjunctNum(){ var fileElements = document.getElementsByTagName("input"); var fileCount = 0; for(var i=0;i<fileElements.length;i++) { if(fileElements[i].type!=undefined&&fileElements[i].type=="file") { fileCount++; if(fileCount>1) { break; } } } if(fileCount == 1) { alert("未上传任何附件！"); return false; } return true; } ///给默认的file上传附件 function fileChange(obj){ var upFile = new UpFile(); upFile.createFileControl(obj); } ///file控件类 function UpFile(){ } ///该方法中创建上传文件的控件,因为在页面中首页就有一个文件上传控件，所以我们得 ///首先得到该文本控件是不是动态添加的．并为新上传的控件添加onchange事件　 UpFile.prototype.create = function(){ var divUploadControlContainer = document.getElementById("divUploadControlContainer"); var fileElement = null; fileElement = document.createElement("input"); fileElement.type="file"; fileElement.name="file"; divUploadControlContainer.appendChild(fileElement); var me = this; fileElement.onchange = function(){ me.createFileControl(this); } } ///该方法用于在点击文件上传控件的时候调用创建文件控件方法作用，并在调用创建上传文件控件后隐藏前一个 ///保持始终多一个空的上传文件控件 UpFile.prototype.createFileControl = function(fileElement){ if(fileElement.value!="") { var pathParts = fileElement.value.split('\\'); this.createPreview(fileElement,fileElement.value,pathParts[pathParts.length-1],"","尚未上传"); fileElement.style.display = "none"; } else { tabAdjunctContainer.removeChild(fileElement); } this.create(); } ///该方法，用于组装成附件的列表 UpFile.prototype.createPreview = function(fileElement,adjunctUrl,adjunctName,raId,adjunctTime){ adjunctCount++; var divAdjunctList = document.getElementById("divAdjunctList"); var tabAdjunctContainer = document.getElementById("tabAdjunctContainer"); var divUploadControlContainer = document.getElementById("divUploadControlContainer"); var row = tabAdjunctContainer.insertRow(); var cell_Num = row.insertCell(); var cell_Adjunct = row.insertCell(); cell_Adjunct.style.textAlign = "left"; var cell_AdjunctUploadTime = row.insertCell(); var cell_Del = row.insertCell(); var aNode = document.createElement("a"); aNode.innerText=adjunctName; aNode.href=adjunctUrl; aNode.target = "_blank"; aNode.className = "aNode"; var adjunctImg = document.createElement("img"); adjunctImg.src="/Images/attachment.gif"; adjunctImg.className = "adjunctImg"; var delImg = document.createElement("img"); delImg.src="/Images/fujian_delete.gif"; delImg.raId = raId; delImg.adjunctName = adjunctName; cell_Num.innerHTML = adjunctCount; cell_Adjunct.appendChild(adjunctImg); cell_Adjunct.appendChild(aNode); cell_AdjunctUploadTime.innerHTML = adjunctTime; cell_Del.appendChild(delImg); delImg.onclick = function(){ if(!confirm("是否确认要删除？")) { return ; } if(this.raId!="") { var txtSiteUrl = "<%=this.txtSiteUrl.ClientID %>"; txtSiteUrl = document.getElementById(txtSiteUrl); //var count = BatchUpLoad.ascx.DeleteAdjunct(this.adjunctName,this.raId).value; var count = UpLoadAdjunct.DeleteAdjunct(this.adjunctName,this.raId,txtSiteUrl.value).value; if(count<=0) { alert('删除附件失败！'); return ; } alert('成功从服务器删除附件！'); } if(fileElement!=null) { divUploadControlContainer.removeChild(fileElement); } tabAdjunctContainer.childNodes[0].removeChild(row); adjunctCount--; alert(adjunctCount); } } var adjunctListStr = "<%=adjunctListStr %>"; //var adjunctListStr = "D:\\南海电子政务二期\\SEC_NHPortal\\源代码\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\20085901550389.jpg?3?2008-11-22|*|D:\\南海电子政务二期\\SEC_NHPortal\\源代码\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\Thumbs.db?3?2002-11-02|*|D:\\南海电子政务二期\\SEC_NHPortal\\源代码\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\Desktop.ini?3?2008-08-16|*|D:\\南海电子政务二期\\SEC_NHPortal\\源代码\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\Thumbs.db?3?2008-01-22|*|"; var upFile = new UpFile(); var adjunctInfo = adjunctListStr.split("|*|"); var adjunctUrl,adjuntNam,raId; for(var i=0;i<adjunctInfo.length-1;i++) { var parameters = adjunctInfo[i].split("?"); adjunctUrl = parameters[0]; adjuntNam = adjunctUrl.split("\\"); adjuntNam = adjuntNam[adjuntNam.length-1]; raId = adjunctInfo[i].split("?")[1]; upFile.createPreview(null,"/file/reportUpdown/"+adjuntNam,adjuntNam,raId,parameters[2]); } function switchPanel(obj){ obj.checked = !obj.checked; if(obj.checked) { document.getElementById("divUploadAdjunctPanel").style.display='block'; document.getElementById("spanDescription").innerHTML = "隐藏上传附件面板"; }else { document.getElementById("divUploadAdjunctPanel").styl