ASP.Net 对上传组件美化 (2010-11-27 16:47:38)转载▼ 标签： it 客户端 文本框 控件 绝对路径 美化 uploadfile 上传控件 分类： 程序
新浪会自动对getElementById加_X请自行查询这个函数
貌似网易是正常的跳转
ASP.NET 的上传组件在客户端显示为
<input type="file" id="fp" " />
在一个很美观的页面中出现file很不协调，
尤其是input type="file"的 按钮无法被css美化
先从客户端着手，
用一个文本框和一个按钮代替input type="file" ，
然后将<input type="file" style="display:none;" />隐藏。
这样button就可以被css 处理了。
当点击按钮时用javascript激活 file组件的click
<script language="javascript">
function xx() {
document.getElementByIdx_x("fp").click();
document.getElementByIdx_x("fpurl").value=document.getElementByIdx_x("fp").value;
}
</script>
<input type="text" id="fpurl" style="width:300px;" /> <input onClick="xx();" type="button" value="文本框和输入框都可以自定义样式" style='width:300px; border:1px solid #000; background:gray;color:#fff;font-weight:bold;font-size:13px;'>
<input type="file" id="fp" style="display:none;" />
这样客户端实现了美化FileUplad的控件
将这段代码转换成ASP.NET 可以使用的方式
<input id="txtUploadFile" style="border: 1px solid #C0C0C0;width:300px" />
<input type="button" value="浏览.." onClick="document.getElementByIdx_x('<%=FileUpload1.ClientID %>').click();" style="border-style: hidden; border-width: 0px; background-position: 0px 0px; background-image: url('images/button_2.jpg'); background-repeat: no-repeat; width: 52px; height: 23px;" />
<asp:FileUpload ID="FileUpload1" runat="server" />
<input id="fpurl" type="hidden" value=<%=FileUpload1.ClientID %> />
因为ASP.NET的程序ID到了客户端会被改变，所以用隐藏字段来存储FileUpload的客户端ID.
JS也相应改变.
function UploadOnpropertychange() {
//JS获取上传控件的值，即所上传文件的绝对路径<%=FileUpload1.ClientID %>
var varUploadFile = document.getElementByIdx_x_x(document.getElementByIdx_x("fpurl").value).value;
//将路径值通过split函数切割分成一个数组集合
//使用这个函数，这个地方主要是为了获取文件名
var varArray = varUploadFile.split('\\');
//最后将所需要的文件名赋给文本框 document.getElementByIdx_x("txtUploadFile").value = varArray[varArray.length - 1];
}
最后在cs文件中加上
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
//先将控件隐藏
this.FileUpload1.Attributes.Add("style", "display:none");
//监视属性变化，此时主要用于捕捉文件路径的写入值
this.FileUpload1.Attributes.Add("onpropertychange", "UploadOnpropertychange()");
}
这样就可以在ASP.NET 使用 CSS处理 FileUpload组件了。
2007-04-27 16:39 by 迷路中的路人甲, 365 阅读, 评论, 收藏, 编辑还有一个问题就是，如何利用这一个控件，进行多个文档的上传工作？
利用dom操作，当每次选择了一个文件的时候，隐藏该file域，在相同位置创建一个新的供下次点击，删除的时候只要直接删掉隐藏的就行了[初步想法未经证实]
一直以来上传控件input file都无法进行美化，例如换个图片什么的；查了很多资料最终就是需要利用隐藏file域实现上传功能；其实很简单，从163里面找了一个样式出来，搞定；
js代码： //依赖prototype.js
function selfile()
{
$("fileurl").value = $("file").value;
}
css代码：//来自mail.163.com
a.addfile{width:70px;height:20px;position:relative;cursor:hand;top:4px;top/**/:0;text-decoration:none;background-position:-823px -17px;display:inline;float:left;margin-top:-5px;margin-top/**/:-1px}
*:lang(zh) a.addfile{margin-top:-2px;cursor:pointer}
a.addfile:hover{background-position:-911px -17px;text-decoration:none}
input.addfile{width:1px;height:18px;cursor:pointer!important;cursor:hand;position:absolute;top:5px;left:-5px;left/**/:-3px;opacity:0;filter:alpha(opacity=0)}
*:lang(zh) input.addfile{left:-18px}
html代码：//
<input type="text" value="" id="fileurl" name="fileurl" readonly/>
<a href="#" class="addfile"> <input type="file" name="file" id="file" hideFocus class="addfile" onChange="selfile();"/>+添加附件(也可以放个美化的图片) </a>