改变文件上传控件的默认风格

在目前做的移动项目开发中，我负责了一个文件上传控件的开发。(效果图如上)在开发的过程中遇到了一些问题，但最后通过不段的查找和测试，终于把问题解决了。下面我把解决问题的思想记录下来，愿意和朋友们分享。当然也希望朋友们能提出其他的解决方案。共同交流。

     说起上传就不得不谈到文件上传控件:

<input type="file" name="t_file">

然而这个上传控件是一个文本框和一个按钮，这个按钮的样式和目前所做的项目中的风格基本是不一致的。于是想打算用一个文本框和一个图片按钮来模仿上传功能。

在上网查找相关资料，得到下面一些信息：

我们知道，大部分控件都有一个单击(Click)事件句柄，上传框在点击”浏览”文件对话框，如果我们自己模拟一个上传框,和一个按钮，在单击自定义按钮时候同事触发上传框的Click事件让它弹出文件对话框：

<input type=”text” id=”f_file”/>
<img src=”” onClick=”t_file.Click()”>
<input type=”file” name=”upload” id=”t_file” onchange=”f_file.value=this.value” style=”display:none;”/>

在点击上传按钮时候执行

t_file.Click()

当上传框的值有所改变时候通过onchange事件执行f_file.value=this.value，即保持真正的上传框和模拟的上传框的值同步更新，style=”display:none”,让真正的上传框隐藏，使模拟的文件上传框能以假乱真。

然而当该代码放在表单中时候，点击提交表单时候，真正的上传框的内容被清空了。意思就是说，这样模拟出来的上传框没有任何意义的。因为没有办法上传文件。之所以是这样的结果，估计是因为微软处于安全方面的考虑。只有当鼠标真正上传在上传控件的按钮上浏览到的文件才可以看到（否则你进入我的页面，我就可以随心所欲的得到你的私密文件）.

 

看来用这种方法是行不通的。于是在网上又找了一种思路：当鼠标移动到上传图片的按钮上时候，让真正的文件上传控件移动到鼠标所在的按钮位置上，那样的话当点击按钮时候，实际上点击的是真正的文件上传控件（设置透明度为0），这样不就解决问题了吗？

参考下面的代码：

<script>
function fclick(obj){
  with(obj){
    style.posTop=event.srcElement.offsetTop
    var x=event.x-offsetWidth/2
    if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
    if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth
    style.posLeft=x
  }
}
</script>
<form method="post" action="" enctype="multipart/form-data">
<input id="f_file">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="選擇上傳文件"><input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>

 

 

最后，听了同事们的建议，终于找到了一个方法来实现：

让真正的文件上传控件和模拟的上传按钮分别放到一个层里面去。然后让这2个层重叠。设置z-index属性，让真正的文件上传控件所在的层在外面，并设置为透明。这样当点击按钮时候实际尚就点击文件上传控件了。根本就不需要那脚本来控制控件的位置。

的确是一个好方法。我按照这个思想终于实现了。下面是参考代码：

 

<table>
    <tr>
        <td>
            <asp:Label ID="lblAttachmentType" runat="server"></asp:Label></td>
        <td>
            <input readonly="readonly" class="inputNormal" id="<%=this.ClientID %>file" type="text"
                size="36" style="width: 100px;" name="f_file" hidefocus></td>
        <td>
            <div style="position: absolute; z-index: 2; cursor:hand;">
                <input id="fileAttachment"    style="filter: alpha(opacity=0); width: 20px; height:auto; cursor: hand;" type="file"
                    runat="server" />
            </div>
            <div style="position: absolute; z-index: 1; cursor: hand;">
                <img src="<%=ViewUpLoadImgUrl%>" style="cursor: hand;" />
            </div>
            &nbsp; &nbsp;  &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <asp:ImageButton ID="btnUpload"    runat="server" ImageAlign="Middle"
                ImageUrl="~/App_Themes/Default/Images/btnUpload.gif" OnClick="btnUpload_Click" />
        </td>
        <td>
            <a runat="server" target="_blank" id="contenturl"></a>
        </td>
    </tr>
</table>

 

在服务器端访问上传的文件名：this.fileAttachment.PostedFile.FileName果然能正常访问，而且我把这个控件放到包含框架的页面上也能准确的定位。简直太妙了。

下面是显示的效果：是不是比默认的要好看多了。和项目的风格和统一起来了.