关于用ImageButton实现FileUpload功能

asp.netJavaScript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个就是upload控件么  有css文件重新定义下upload的外观
<style>
.MultiFile-applied {
    cursor: pointer;
    outline: medium none;
    vertical-align: middle;
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    z-index:99;
        filter:alpha(opacity=0);
      -moz-opacity:0;
      -khtml-opacity: 0;
      opacity: 0;
}
.MultiFile-wrap {
    /*background: url("/sysImages/work/upload.gif") no-repeat scroll 0 0 transparent;*/
    display: block;
    outline: medium none;
    position:relative;
    cursor:pointer;
}
</style>              <a id="uploads_wrap" class="MultiFile-wrap">
                <img src="/sysImages/work/upload.gif" width="30" height="30" />
                <iframe src="flow_upload.aspx?no-cache=<%= DateTime.Now.ToString() %>" class="MultiFile-applied" scrolling="no" frameborder="0"></iframe>
              </a>
              导入
flow_upload.aspx
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="flow_upload.aspx.cs" Inherits="Galsun.HH.FCX.Web.manage.flow.flow_upload" %><!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></title>
    <style>
    body
    {
        padding:0px; margin:0px;
     }
.MultiFile-applied {
    cursor: pointer;
    font-size: 40px;
    margin-left: -450px;
}
    </style>
</head>
<script src="/Scripts/jquery-1.4.1.js"></script>
<body>
    <script>
        function StarImport(num) {
            parent.Import(num);
        }
        function showError(error) {
            parent.showError(error);
        }
    </script>
    <form id="form1" runat="server">
    <div style="width:50px; height:50px; overflow:hidden;">
    <asp:FileUpload ID="FileUpload1" runat="server" CssClass="MultiFile-applied" />
    </div>
    <div style="display:none"><asp:LinkButton ID="bnt_upload" runat="server" onclick="bnt_upload_Click">LinkButton</asp:LinkButton></div>
    </form>
    <script>
        document.getElementById("FileUpload1").onchange = function () {
            if (this.value != "") {
                parent.UpdateFileing();
                __doPostBack('bnt_upload', 'Click');
            }
        }
    </script>
</body>
</html>
原理就是让
FileUpload变大(font-size可以控件FileUpload的尺寸大小),然后用margin-left: -450px让FileUpload的button和我们的图片重叠,让FileUpload的z-index在图片之上,最后一步就是用滤镜将FileUpload的透明度为0        filter:alpha(opacity=0);//IE透明度
//FF等的透明度

      -moz-opacity:0;
      -khtml-opacity: 0;
      opacity: 0;
我刚刚试了试效果不太一样也许我没有写好可不可以直接写出来。。就做的和那个网站上的效果一样图片形式的发我邮箱里就行 [email protected]   到时候给帖子追加分
算了。。我自己解决吧我直接把控件用CSS样式给隐藏掉点击图片用JavaScript触发fileuploadclick事件
我跟LZ用了一样的方法  可是问题来了。。   讲FileUpload隐藏之后  用图片触发它的点击事件  那上传的时候就会上传一个空的文件上去，  求解啊。。
http://upan.hust.cc/canjian ~~~