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

该功能实现了多文件上传功能，点击添加是同时将文件显示在下面的列表。支持删除功能。

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)));

}

前台代码

@ 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">

<title>Untitled Page</title>

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>

<div>

<tr>

<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="提交" />

</td>

</tr>

</table>

<tr>

</td>

<td>

</td>

</tr>

</table>

<tr>

<td style="width:80%">FileName</td>

<td style="width:80%">button</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Tag标签: js,文件批量上传

posted on 2008-10-10 12:36 石川阅读(866) 评论(0) 编辑收藏举报