Solution IE Browser input file hide can't upload files problem

is also a problem of IE, recently with IE browser knock on, this problem found that many people have encountered, really egg pain. But today this is not a bug, because IE may be from a security perspective to consider the result. Read it step-by-step.

General Upload Example

First of all, ordinary file upload, very simple, front-end code:

<! DOCTYPE html>
 

 

 
  

    upload.php Code: 
  

 
 
Echo ' <pre> ';
Print_r ($_files["file"]);
Echo ' </pre> ';
 

 

 
  

    is actually printing the file information obtained. We test, after selecting the file, submit the results to the PHP page as follows: 
  

 
 

 
 
 
  
 
   
 
    
The code is as follows
 
    
Copy Code
 
   
 
   
 
    
 
     

       Array 
      
( 
      
[Name] => 7.jpg 
      
[Type] => image/jpeg 
      
[Tmp_name] =>/tmp/php0vkjpg 
      
[ERROR] => 0 
      
[Size] => 36297 
      
) 
     
 
   
 
  
 

 
 

 

 
  

    Can obtain the file information correctly, only needs the CP to be possible to save. 
  

 
 

 

 
  
 
   Replace the file label with another button 
  

 
 

 

 
  

    But the default file tag is hard to read, and there's a big gap in every browser. So we basically hide the real file tag and create a tag to replace it, like we create a tag to replace it, hide the file tag, and click a tab to trigger the file tag Click to eject the Select File window. The final page code is as follows: 
  

 
 
<! DOCTYPE html>
 

  

 
   

     Only a label is visible on the page 
   

  
 

  

 
   


  
 

  

 
   

     Click "Upload File" to open the window of the selection file 
   

  
 

  

 
   


  
 

  

 
   

     After you select a file, transfer the file information correctly to the server 
   

  
 

  

 
   


  
 

  

 
   

     This completes the file upload, this operation under the Chrome,firefox are normal, ie under the problem. 
   

  
 

  

 
   
 
    IE cannot upload files 
   

  
 

  

 
   

     IE can also be normal to open the window of the selection file 
   

  
 

  

 
   


  
 

  

 
   

     But when you select a file, you cannot upload it, and also reported an "Access denied" error, such as the Red Circle section of the screenshot. 
   

  
 

  

 
   


  
 

  

 
   
 
    Solve the problem of IE can not upload files 
   

  
 

  

 
   

     In fact, this is the problem of IE security restrictions, did not click the File browse button to select files are not allowed to upload, since IE has to personally click, we can work around, so that the existence of a custom button and can really click to the file tag. The solution is to have the file label cover on a label, but file is transparent so that the user sees the appearance of a label, and the actual click is the file tag. As shown in figure: 
   

  
 

  

 
   


  
 

  

 
   

     The final page code is as follows: 
   

  
 
<a style= "Position:relative;display:block;width:100px;height:30px;background: #EEE; border:1px solid #999; Text-align:center; "  href= "javascript:void (0);" > Upload file
	<form action= "http://192.168.1.99/upload/upload.php" method= "POST" Enctype= "Multipart/form-data" >
		<input style= "position:absolute;left:0;top:0;width:100%;height:100%; z-index:999;opacity:0 "onchange=" Document.forms[0].submit (); "type=" File "name=" file "  />
	</form >
</a>
 

  

 
   

     Page: 
   

  
 

  

 
   


  
 

  

 
   

     Need to pay attention to a few problems 
    
 
    1, cancel a label onclick event, because in fact no longer need a label onclick trigger file Click, but directly click to file;
2, the file tag does not need to set display:none hidden, but through the opacity:0 to make it completely transparent, actually it is floating on a label above
3, the file label set Position:absolute to give left:0, top:0, otherwise the file label will not match the cover a label caused by clicking the button when the file label is not clicked 
   

  
 

  

 
   

     Let's Test it again: 
   

  
 

  

 
   

     Click on the button: 
   

  
 

  

 
   


  
 

  

 
   

     Select File: 
   

  
 

  

 
   


  
 

  

 
   

     Upload success!