需求 : 我要通过FileUpload控件 上传文件 但是我为了控制FileUpload的样式
在页面上多方了一个button( value="浏览") 通过button的单击事件调用js触发FileUpload的单击事件
然后在点击提交按钮 这时问题来了
在ie8下或者在360浏览器的兼容模式下 无法提交
代码去给出来了 求解、
希望各位高手帮帮忙啊
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoadResume.aspx.cs" Inherits="test_UpLoadResume" %>
<!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 type="text/css">
.cssd{width:60px; border-color:#2f82be; margin-bottom:0; display:block; margin-left:277px; color:White; margin-top:0; text-align:center; height:22px;}
</style>
<script type="text/javascript">
function mc(){
var _i=document.getElementById("FileUpload1");
_i.click();
}
function mm(){
var Fullfilename=document.getElementById('FileUpload1').value;//包含路径的文件名
document.getElementById("puf").value=(Fullfilename);
var fileName=new String(Fullfilename.substring(Fullfilename.lastIndexOf('\\') + 1));//文件名
// document.getElementById("spFileName").innerHTML=(fileName);
}
function delFile(){
document.getElementById("puf").value="";
document.getElementById('FileUpload1').value="";
}
function cancleEventUp(oevent){ if(document.all){ window.event.cancelBubble=true; }else{ oevent.stopPropagation(); } }
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="puf" type="text" name="predent" readonly="readonly" style="width:270px; height:18px; float:left; " />
<input type="button" value="浏览" onclick="mc();cancleEventUp(event);" class="cssd" /><br />
<asp:FileUpload ID="FileUpload1" style="width:350px;" onchange="mm();cancleEventUp(event);" runat="server" /><br />
<input type="button" id="btnFileName" onclick="delFile()" style="height:18px; width:50px; border:0; background: url('../images/filedes.png') no-repeat;" value="" /><br />
<asp:Button ID="asd" runat="server" Text="asdf" onclick="asd_Click" />
</form>
</body>
</html>
一般做这个美化,都是用绝对定位来实现,有几个链接可以参考下:
http://www.emblematiq.com/lab/niceforms/demo/niceforms.html
http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
http://www.quirksmode.org/dom/inputfile.html
楼主可以根据自己的需要去修改
用jQuery试试:
$("#"+_i).click();