模拟126上传附件
昨天跟老师一块做一个项目，其中后台需要有上传附件的功能，这下可难住我了，也许有人会说，用FileupLoad不是很好实现吗，不错，那肯定可以实现，试想一下，如果一条新闻要上传很多附件，怎么处理啊，如果用Fileupload那页面肯定很难看了，之前一直都在用FCkeditor编辑器，但他没有上传文件的功能，eWebEditor有支持上传文件的，但.Net版是需要收费飞，没办法，突然想起了126邮箱添加附件的功能，花了点时间，给弄出来了，不过，还是有缺陷，因为在IE6中，没法透明显示，不过在IE7和FF中，都还正常……
先给发张截图
添加附件哪几个字，其实是一张图片，把浏览那几个字的透明度设成0，用一张图片覆盖
前台部分代码
Code1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demon.aspx.cs" Inherits="Demon" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
5
<html xmlns="http://www.w3.org/1999/xhtml">6
<head runat="server">7
<title>模拟126上传附件</title>8
<style type="text/css">9
/**//*附件 开始*/10
a.files, span.del_file 
{overflow:hidden;display:-moz-inline-box;display:inline-block;background:url(F2.gif);cursor:pointer;}11
a.files { width:54px;height:22px; #vertical-align:middle;cursor:pointer;background-image:url(../../Images/inputfile.gif);}12
<%--把这里的背景图片换成你想要显示的添加附件--%>13
a.files:hover {background-position:0 -22px;cursor:pointer;}14
a.files input {margin-left:-160px;filter:alpha(opacity=0);opacity:0; background-image:url(favicon.ico);cursor:pointer;}15
span.del_file {width:15px;height:15px;background-position:0px -250px;vertical-align:middle;margin-left:2px;cursor:pointer; background-image:url(../../Images/delete.gif);}16
<%--把这里的背景图片换成你想要取消附件的图片--%>17
/**//*附件 结束*/18
</style>19
<script type="text/javascript">20
var File = {21
/**//*22
传说中的祥哥www.pp126.net23
-------------------------------------------------------24
**num25
为元素的下标26
**count27
为元素的个数28
**name29
为元素的名字和ID的前段（元素的实际名称是前段加下标）30
**status31
为状态的ID32
**form33
为表单的ID34
-------------------------------------------------------35
*/36
num : 1, count : 037
38
, name : 'file', status : 'file', form : 'form'39
40
, urls : {}41
42
, add : function (file) {43
//添加附件44
if (this.urls[file.value]) {45
alert('此文件已存在');46
return false;47
}48
49
var a = file.parentNode;50
var status = document.getElementById(this.status);51
52
this.urls[file.value] = 1;53
54
document.getElementById(this.form).appendChild(file);55
56
if (/Firefox/.test(window.navigator.userAgent)) {57
//这里一定要加，否则在FF中回出错58
var b = a, a = a.cloneNode(true);59
b.parentNode.replaceChild(a, b);60
b = null;61
}62
63
file.style.display = 'none';64
65
a.innerHTML = '<input id="' + this.name + (this.num + 1) + '" name="' + this.name + (this.num + 1) + '" onchange="File.add(this)" type="file" \/>';66
67
status.innerHTML += ' <span>' + (/[^\\]+$/.exec(file.value)||'') + '<span class="del_file" onclick="File.del(this, ' + this.num + ')"><\/span> <\/span>'68
69
70
this.count ++, this.num ++, a = file= null;71
}72
73
, del : function (span, num) {74
//删除附件75
var file = document.getElementById(this.name + num);76
delete this.urls[file.value];77
78
document.getElementById(this.form).removeChild(file);79
span.parentNode.parentNode.removeChild(span.parentNode);80
this.count --, span = num = null;81
}82
83
};84
</script>85
</head>86
<body>87
<form id="form" runat="server">88
<a href="javascript:void(0);" class="files"><input id="file1" name="file1" onchange="File.add(this)" type="file" /></a>89
<div id="file" class ="addfujian"></div>90
<asp:Button ID="submit" runat="server" Text="添加" onclick="添加_Click" />91
</form>92
</body>93
</html>
后台部分代码
Code1
using System;2
using System.Collections;3
using System.Configuration;4
using System.Data;5
using System.Web;6
using System.Web.Security;7
using System.Web.UI;8
using System.Web.UI.HtmlControls;9
using System.Web.UI.WebControls;10
using System.Web.UI.WebControls.WebParts;11
public partial class Demon : System.Web.UI.Page12
{13
protected void Page_Load(object sender, EventArgs e)14
{15
16
}17
protected void 添加_Click(object sender, EventArgs e)18
{19
HttpFileCollection _files = System.Web.HttpContext.Current.Request.Files;20
for (int i = 0; i < _files.Count; i++)21
{22
HttpPostedFile postedFile = _files[i];23
string fileName = System.IO.Path.GetFileName(postedFile .FileName);24
if (fileName != "")25
{26
_files[i].SaveAs(System.Web.HttpContext.Current.Request.MapPath("NewsPicture/fujian/") +fileName); //在这里写上你的上传路径27
}28
29
}30
}31
}
