asp.net中采用ajax进行多文件上传和删除

      关于多文件上传，孟宪会做了vb和c#版本的（原文：http://dotnet.aspx.cc/article/58ea3515-36f2-4fd9-ac89-eaf49f59816c/read.aspx），他的思想就是点击增加按钮后用javascript操作增加一个input file DOM元素。他这种方式显得并不是很美观。
      通常我们会希望可以控制input file的'浏览...',以达到美观的效果，不过默认是更改不了这个。如果自己添加一个input text文本框，然后放一个button ,然后用css控制外观，结合javascript操作就可以达到多目的了。
       我的思想是自己添加input text和button模拟input file显示的效果，用css进行设置所添加控件的外观，将真正的input file进行隐藏，点击上传button后，文件并没真正的上传以减少与服务器来回传送数据，只把上传后的效果显示到当前页面，就是模拟上传。因为在上传中，如果用户想取消已上传的文件，点击页面上显示的那些需要删除的文件就可以了，这样删除当然也没有与服务器交互。当点击确定后，所有添加的文件采用ajax技术上传到服务器。当进入到上传的页面，会显示已上传过的文件，这些都是已经在服务器了。如果删除已上传的文件，同样只需点击删除标志，这也是模拟删除，并没有真正的删除文件，只是将其状态置为删除，后面附上恢复操作。当确定后，这些文件将会被物理上删除，同时从数据库清除对应的信息。
        首次进入页面，显示已上传的文件，效果为：

代码如下：

private void iniPaged(){
2

DBOper db=new DBOper();
3

string strsql="select * from up_all";
4

DataTable dt=db.getData(strsql).Tables[0];
5

System.Text.StringBuilder strbl=new System.Text.StringBuilder();
6

strbl.Append("<br><span id='uploadedfiles'><span><span name='filename'>文件名        </span><span class='divshow'>日期     </span><span>删除</span></span><br>");
7

for(int i=0;i<dt.Rows.Count;i++){
8

strbl.Append("<span id='up_"+i+"' path='"+dt.Rows[i]["up_path"].ToString()+"'><span>"+dt.Rows[i]["up_name"].ToString()+"</span><span>"+dt.Rows[i]["up_date"].ToString()+"</span><div class='divshow errorShow' id="+i+" onclick='DelFiles("+i+")'>×</div></span><br>");
9

}
10

strbl.Append("</span>");
11

this.Label1.Text=strbl.ToString();
12

}

添加，删除文件演示效果如下：

aspx页面做为模型部分，代码如下

<form id="Form1" method="post" encType="multipart/form-data" runat=server>
2

<div><input id="files" type="text"><input id="browse" type="button" value="浏览

" name="file"><input id="up" onclick="UpLoadEvent()" type="button" value="上传">
3

</div>
4

<div id="Results"></div>
5

<div class="HideInputFile" id="allfile"><span id="delinput_1"><input id="file_1" type="file" name="file_1"></span>
6

</div>
7

<br>
8

<asp:Button ID="ok" Text="上传确定" Runat="server"></asp:Button>
9

<input type="button" value="删除确定" onclick="SaveModify()">
10

<asp:label id="Label1" runat="server"></asp:label>
11

</form>

input type=file上传到服务器，form的enctype="multipart/form-data"属性设置不能少，否则无法传送到服务器，即HttpContext.Current.Request.Files为空。
css做为视图部分，这里只是简单的设置，代码：

.errorShow { CURSOR: hand; COLOR: #ff0000 }
2

.colortuhuang { DISPLAY: inline; MARGIN-LEFT: 1pt; COLOR: #c49238; MARGIN-RIGHT: 1pt; HEIGHT: 0px; TEXT-ALIGN: left }
3

.divshow { DISPLAY: inline; MARGIN-LEFT: 1pt; MARGIN-RIGHT: 1pt; HEIGHT: 0px; TEXT-ALIGN: left }
4

.InputFileBeforeSelect { FILTER: alpha(opacity=0); WIDTH: 10px; POSITION: absolute }
5

.InputFileAfterSelect { FILTER: alpha(opacity=0) }
6

.HideInputFile { FILTER: alpha(opacity=0) }

最重要的是虑镜功能，它实际上隐藏了真正的input file元素。
下面的代码做为控制部分，写的较凌乱，采用ajax技术做了简单的处理，不正之处望各位赐教。如下所示：

var i=1;
2

/**
3

**清除上传选择的文件，模拟上传时的文件
4

**/
5

function DelFile(){
6

var spanDOM=getElement("del_"+this.id);
7

spanDOM.innerHTML="";
8

getElement("delinput_"+this.id).innerHTML=""; //清除对应的input type=file控件
9

var div=getElement("Results");
11

var spans=div.getElementsByTagName("a");
12

if(spans){
13

for(var j=0;j<spans.length;j++){
14

var k=j+1;
15

spans[j].innerHTML=k+". ";
16

}
17

}
18

}
19

function cancleDel(){
22

var id=this.id
23

id=id.split('_');
24

var spand=getElement(id[1]);
25

spand.innerHTML="×";
26

}
28

/**
30

**模拟删除服务器上的文件
31

**/
32

function DelFiles(id){
33

var spanDOM=getElement(id);
34

spanDOM.innerHTML="已被删除  ";
35

var cancle=createElement("a");
36

cancle.innerHTML="恢复  ";
37

cancle.id="m_"+id;
38

cancle.onclick=cancleDel;
39

spanDOM.appendChild(cancle);
40

}
42

/**
44

**提交删除，删除服务器上的文件
45

**/
46

function SaveModify(){
47

var bord=getElement('uploadedfiles');
48

var files=bord.getElementsByTagName("a");
49

for(var m=0;m<files.length;m++){
50

var parents=files[m].parentElement;//<a>的父级元素
51

parents=parents.parentElement;
52

var filepath=parents.path;
53

var url="do.aspx?path="+UrlEncode(filepath);
54

StateChange(url);
55

}
56

}
57

/**
59

**创建xmlhttp对象
60

**/
61

function CreateXMLHttp(){
63

var httpxml;
64

if(window.ActiveXObject)
65

httpxml=new ActiveXObject("microsoft.XMLHTTP"); //基于ie的xmlhttp
66

else
67

httpxml=new XMLHttpRequest();
68

return httpxml;
69

}
70

/**
72

**readystatechange事件
73

**/
74

function StateChange(url){
76

var httpxml;
77

httpxml=CreateXMLHttp();
78

httpxml.open("post",url,true);
79

httpxml.send();
80

httpxml.onreadystatechange=function(){
81

if(httpxml.readyState==4)
82

if(httpxml.status==200){
83

/*
84

**操作成功
85

**这里放置你自己的代码
86

**/
87

}
88

}
89

}
90

/**
92

**模拟上传文件
93

**显示‘上传’后的文件名
94

**创建一个input file元素
95

**/
96

function UpLoadEvent(){
97

var k=i-1;
98

var filename=getElement("files").value;
99

100

if(filename.length>0){ //是否已经选择文件
101

var spandom=createElement("span");
102

spandom.id="del_"+k;
103

104

var spannumber=createElement("a");//创建用于显示文件序号的span标签
105

spannumber.name="spancounter";
106

107

var div=getElement("Results");
108

var divs=div.getElementsByTagName("div");
109

110

var j=divs.length+1;
111

spannumber.innerHTML=j+". ";//显示文件序号
112

113

var divdom=createElement("div"); //用于显示文件名的div
114

divdom.innerHTML=filename.substring(filename.lastIndexOf("\\")+1);
115

divdom.className="colortuhuang";
116

117

var spanx=createElement("span"); //显示用于删除文件的‘图片’
118

spanx.className="errorShow";
119

spanx.innerHTML="  ×<br>";
120

spanx.id=k;
121

spanx.onclick=DelFile;
122

123

spandom.appendChild(spannumber);
124

spandom.appendChild(divdom);
125

spandom.appendChild(spanx);
126

127

128

div.appendChild(spandom);
129

130

getElement("files").value=""; //置空input type=text框，防止多次点击上传按钮
131

}
132

else
133

alert("未选择文件");
134

}
135

136

/**
137

**点击选择文件事件
138

**/
139

function clickEvent(){
140

var inputfile=getElement("file_"+i);
141

if(inputfile.value.length>0){//当选择文件后进行追加Input type=file控件，否则不予处理
142

getElement("files").value=inputfile.value;
143

inputfile.className="InputFileAfterSelect"; //选择文件完成后将其移出焦点之外
144

145

var divdom=getElement("allfile");
146

var spanfdom=createElement("span");
147

spanfdom.id="delinput_"+(++i);
148

149

var inputdom=createElement("input");
150

inputdom.type="file";
151

inputdom.id="file_"+i;
152

inputdom.name="file_"+i;
153

inputdom.className="InputFileBeforeSelect";
154

inputdom.onchange=clickEvent;
155

156

var btn=new MouseOverObj("file_"+i);
157

inputdom.onmouseover=btn.BrowseMouseOver;
158

159

spanfdom.appendChild(inputdom);
160

divdom.appendChild(spanfdom);
161

162

setFocus();
163

}
164

}
165

166

/**
167

**设置焦点
168

**/
169

function setFocus(){
170

document.getElementById("browse").focus();
171

}
172

173

174

function getElement(id){
175

return document.getElementById(id);
176

}
177

178

function createElement(tag){
179

return document.createElement(tag);
180

}
181

182

function MouseOverObj(fileid){
183

this.buttonobj=getElement("browse")
184

this.id=fileid;
185

this.buttonobj.inputfile=this;
186

}
187

188

MouseOverObj.prototype.BrowseMouseOver=function(){
189

var inputfile=this.inputfile || this.getAttirbute("inputfile "); //取得附加在browse按钮上的inputfile对象

190

var inputdom=getElement(inputfile.id);
191

with(inputdom){
192

style.posTop=event.srcElement.offsetTop; //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
193

style.posLeft=event.x-offsetWidth/4 ;
194

}
195

}
196

197

window.onload=function(){
198

var button=new MouseOverObj("file_1");
199

getElement("browse").onmouseover=button.BrowseMouseOver;
200

with(getElement("file_1")){
201

className="InputFileBeforeSelect";
202

onchange=clickEvent;
203

}
204

}

点击“上传确定”，执行保存文件到服务器操作：

private void ok_Click(object sender, System.EventArgs e)

{

System.Text.StringBuilder strb=new System.Text.StringBuilder();

HttpFileCollection files=HttpContext.Current.Request.Files;

for(int i=0;i<files.Count;i++)

{

HttpPostedFile file=files[i];

strb.Append("文件名："+System.IO.Path.GetFileName(file.FileName)+"<br>");

strb.Append("文件类型："+file.ContentType.ToString()+"<br>");

strb.Append("文件大小："+file.ContentLength+"<br>");

file.SaveAs("the pos

.");

* save the information of the file to database

* */

}

this.Label1.Text=strb.ToString();

}

Label1给出所上传的文件信息。
此例只在ie下面运行，firefox下面有问题，如虑镜、event在firefox下都出问题，还需要修改。

posted on 2007-09-06 15:30 Yanbo.Hu 阅读(4141) 评论(4) 收藏举报

刷新页面返回顶部

huankfy

公告