js实现文件批量上传，支持ie firefox

it2022-05-09 28

该功能实现了多文件上传功能，点击添加是同时将文件显示在下面的列表。支持删除功能。 Code using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.IO;using System.Text.RegularExpressions;public partial class Default2 : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { Regex badCharReplace = new Regex(@"^([<>""'%;()&])$"); } protected void Button2_Click(object sender, EventArgs e) { /**//////附件 HttpFileCollection fileList = HttpContext.Current.Request.Files; //保存附件 for (int i = 0; i < fileList.Count; i++) { /**////添加单个附件 HttpPostedFile file = fileList[i]; if (file.FileName.Length <= 0 || file.ContentLength <= 0) { break; } // 保存附件到硬盘中 file.SaveAs(MapPath("Attachments/" + Path.GetFileName(file.FileName))); } }}

前台代码

Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function addFile() { //创建输入元素(通用代码) //添加上传文件按钮 var fileUpLoadbutton = document.createElement("input"); fileUpLoadbutton.setAttribute("type","file"); fileUpLoadbutton.setAttribute("size","50"); fileUpLoadbutton.setAttribute("name","File"); fileUpLoadbutton.setAttribute("class","ButtonCss"); //添加删除按钮 var deleteImgbutton = document.createElement("img"); deleteImgbutton.setAttribute("src","images/Btdelete.gif"); deleteImgbutton.setAttribute("style","width: 38px; height: 20px"); //给 deleteImgbutton.onclick=function(){deleteRow(1,this);}; var lastIndex= document.getElementById('FileList').childNodes.length-1; if(lastIndex>-1) { var hideFile=document.getElementById('FileList').childNodes[lastIndex]; if(hideFile.value=="") { return; } hideFile.style.display="none"; var cell1 = document.createElement("td"); var cell2 = document.createElement("td"); // var str = hideFile.value; var myList =new Array(); myList= hideFile.value.split("\\"); cell1.innerHTML = myList[myList.length-1];// hideFile.value; cell2.appendChild(deleteImgbutton); var row = document.createElement("tr"); row.appendChild(cell1); row.appendChild(cell2); var tBody = document.createElement("tbody").appendChild(row); //识别当前浏览器 if(navigator.appName.indexOf("Explorer") > -1) { document.getElementById("FileTable").childNodes[0].appendChild(tBody); } else { document.getElementById("FileTable").appendChild(tBody); } } document.getElementById('FileList').appendChild(fileUpLoadbutton); } function deleteRow(targPos,btnObj) { var tabObj=document.getElementById("FileTable"); var fileListLength = document.getElementById('FileList').childNodes.length; var tabRowsLength = tabObj.rows.length; for(var i =0;i<tabRowsLength;i++) { if(tabObj.getElementsByTagName('img')[i]==btnObj) { //删除当前选中行 tabObj.deleteRow(i+targPos); //获得选中行对应的上传我文件对象 var oldChild = document.getElementById('FileList').childNodes[i]; //删除上传文件对象 document.getElementById('FileList').removeChild(oldChild); } } } </script></head><body> <form id="form1" runat="server"> <div> <table border="0" cellpadding="0" cellspacing="0" height="26" width="100%"> <tr> <td align="left" valign="middle"> <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="提交" /> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" height="26" width="100%"> <tr> <td align="left" valign="middle"> <DIV id="FileList"><input id="File1" runat="server" name="File" size="50" type="file" /></DIV> </td> <td> <input id="Button1" onclick="addFile()" size="26" style="height: 26px" type="button" value="增加附件" /> </td> </tr> </table> <table style="width:100%" id="FileTable"> <tr> <td style="width:80%">FileName</td> <td style="width:80%">button</td> </tr> </table> </div> </form></body></html>

转载于:https://www.cnblogs.com/kaiwind/archive/2008/10/10/1307888.html

专利

最新回复(0)