Summary: The FileUpload control that is brought with ASP. NET will change with the browser, the style will be changed, very ugly, in order to improve the user experience, so we will go to customize the FileUpload control
Implementation ideas: Replace the FileUpload control with two button and TextBox controls, trigger the FileUpload control's Click event when the button is clicked, and assign the value of the FileUpload control to the textbox via JS
Code:
aspx file:
1"http://www.w3.org/1999/xhtml">2"Head1"runat="Server">3<title></title>45<body>6<form id="Form1"runat="Server">7<div>8<asp:fileupload id="Fileup"runat="Server"style="display:none;width:180px"/>9<asp:textbox id="Txtfilename"runat="Server"Maxlength=" -"Width="170px"></asp:TextBox>Ten<asp:button id="Btnbrowse"runat="Server"style="width:60px"cssclass="btn"onclientclick="return Showbrowse ()" Onetext="Browse"/> A<asp:button id="Btnupload"runat="Server"Width="60px"cssclass="btn"onclick="Btnupload_click" -text="Upload"/> -</div> the</form> -<script language="JavaScript"Type="Text/javascript"> - function Showbrowse () - { + varFile1=document.getelementbyid ("Fileup"); - if(file1) + { A File1.click (); at varIsie = (document.all)?true:false;//whether it's IE kernel or Mozilla - returnIsie;//Firefox adds return to False to bring the file name back to Textbox,ie after selecting files if you return false upload to click two times button to trigger - } - } -</script> -</body> inView CodeJS file:
1 function Check_filepath () {2 varFilePath = document.getElementById ("Fileup");3 varFilenewname = document.getElementById ("Txtfilename");4 if(Filepath.value! ="') 5 { 6Filenewname.value =Filepath.value;7 }8}
Aspx.cs file:
1 // Page_Load Events 2 this. FILEUP.ATTRIBUTES.ADD ("onchange""javascript:return Check_ FilePath (); ");
1 //Btnupload_click Events2 //When you click Btnupload_click, upload the file to the specified path .3 //need to consider a multi-browser problem, if it is IE, directly with the FileUpload control of the SaveAs function, will save an empty file4 stringStrfilename="path to local save file";5 if(HttpContext.Current.Request.Browser.Browser = ="IE")6 {7WebClient wclient =NewWebClient ();8Wclient.downloadfile ( This. TxtFileName.Text.Trim (), strFileName);9 }Ten Else One { A This. FileUp.PostedFile.SaveAs (strFileName); -}
Legacy issues: When the Internet Explorer security level is high, will not get the full path of the file, similar to C:\fakepath\TP.jpg, and lead to save;
A lot of the online solution is to manually change the security level of IE, I am wondering if I can change the security level of IE browser in code, study ing ...
Friends who wish to have a solution can share:)
C # Custom FileUpload controls