file input 在ie9瀏覽器的拒絕訪問錯誤

時間 2019-11-11

標籤 file input ie9 瀏覽器拒絕訪問錯誤欄目瀏覽器简体版

原文原文鏈接

此文轉載至 http://lililucky1211.iteye.com/blog/1916129javascript

1. label for 綁定元素響應事件，例如點擊label能夠執行綁定的input 的button的事件，php

Html代碼

<label for="large_icon_url" class="btn_up file-up-btn">上傳大圖標</label>
<input type="file" accept="image/*" class="input_f pics" maxnums="1" name="large_icon_url" id="large_icon_url">

label實現了好看的效果，可是因爲ie安全限制問題，會拒絕非file瀏覽上傳文件的訪問，因此處理方法應該是讓file附在lable的上面，而後是透明處理，直接點擊file便可。html

2. 轉上傳文件的隱藏處理：前端

IE input file隱藏不能上傳文件解決方法

HTML/CSS 2013-05-30 上傳,IE,input,file

又是IE的一個問題，近來是跟IE瀏覽器磕上了，這個問題發現很多人也遇到過，實在蛋疼。但今天這個不能算是一個bug，由於IE多是從安全角度上考慮結果致使的。一步步來解讀。java

普通上傳例子

首先普通的文件上傳呢，很簡單，前端代碼：瀏覽器

 
         <!DOCTYPE html> 
        
 
         < 
         html 
         > 
        
 
              
         < 
         head 
         > 
        
 
                  
         < 
         meta 
         charset 
         = 
         "utf-8" 
         /> 
        
 
                  
         < 
         title 
         >file標籤隱藏</ 
         title 
         > 
        

            
        
 
              
         </ 
         head 
         > 
        
 
              
         < 
         body 
         > 
        
 
                  
         < 
         form 
         action 
         = 
         "http://192.168.1.99/upload/upload.php" 
         method 
         = 
         "post" 
         enctype 
         = 
         "multipart/form-data" 
         > 
        
 
                      
         < 
         input 
         onchange 
         = 
         "document.forms[0].submit();" 
         type 
         = 
         "file" 
         name 
         = 
         "file" 
         /> 
        
 
                  
         </ 
         form 
         > 
        
 
              
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        

upload.php代碼：安全

 
         echo 
         '<pre>' 
         ; 
        
         print_r( 
         $_FILES 
         [ 
         "file" 
         ]); 
        
         echo 
         '</pre>' 
         ;

其實就是打印獲取到的文件信息。咱們測試一下，選擇文件後，提交到PHP頁面結果以下：服務器

Array
(
    [name] => 7.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/php0VkjPG
    [error] => 0
    [size] => 36297
)post

能正確獲取文件信息，只須要cp下就能保存。測試

用別的按鈕替代file標籤

可是默file標籤很難看，並且每一個瀏覽器下都有很大差距。所以咱們基本都把真正的file標籤給隱藏，而後建立一個標籤來替代它，好比咱們建立一個a標籤來替代它，隱藏file標籤，單擊a標籤時觸發file標籤click彈出選擇文件窗口。最終頁面代碼以下：

 
         <!DOCTYPE html> 
        
 
         < 
         html 
         > 
        
 
              
         < 
         head 
         > 
        
 
                  
         < 
         meta 
         charset 
         = 
         "utf-8" 
         /> 
        
 
                  
         < 
         title 
         >file標籤隱藏</ 
         title 
         > 
        

            
        
 
              
         </ 
         head 
         > 
        
 
              
         < 
         body 
         > 
        
 
                  
         < 
         form 
         action 
         = 
         "http://192.168.1.99/upload/upload.php" 
         method 
         = 
         "post" 
         enctype 
         = 
         "multipart/form-data" 
         style 
         = 
         "display:none;" 
         > 
        
 
                      
         < 
         input 
         onchange 
         = 
         "document.forms[0].submit();" 
         type 
         = 
         "file" 
         name 
         = 
         "file"  
         /> 
        
 
                  
         </ 
         form 
         > 
        

            
        
 
                  
         < 
         a 
         onclick 
         = 
         "document.forms[0].file.click();" 
         href 
         = 
         "javascript:void(0);" 
         >上傳文件</ 
         a 
         > 
        
 
              
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        

頁面上就只看見a標籤

點擊「上傳文件」彈開選擇文件的窗口

選擇文件後，正確傳送文件信息到服務器

這樣就完成文件上傳了，這個操做在Chrome，FireFox下都正常，IE下有問題。

IE不能上傳文件

IE下也能正常彈開選擇文件的窗口

但選擇文件後，卻不能上傳，同時還報一個「拒絕訪問」錯誤，如截圖中紅圈部分

解決IE下不能上傳文件的問題

其實這是IE安全限制問題，沒有點擊file的瀏覽按鈕選擇文件都不讓上傳，既然IE非得要親自點擊，咱們能夠變通一下，讓自定義按鈕存在又能真正點擊到file標籤。解決方案是讓file標籤蓋在a標籤上，但file是透明的，這樣用戶看到的是a標籤的外觀，實際點擊是file標籤。如圖：

最終頁面代碼以下：

 
         < 
         a 
         style 
         = 
         "position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;"  
         href 
         = 
         "javascript:void(0);" 
         >上傳文件 
        
 
              
         < 
         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 
         > 
        

頁面：

須要注意幾個問題
一、取消a標籤onclick事件，由於實際上已經不須要a標籤的onclick觸發file的click了，而是直接就點擊到file；
二、file標籤不須要再設置display:none隱藏，而是經過opacity:0讓它徹底透明，實際它是浮在a標籤之上
三、file標籤設置position:absolute後要給left:0、top:0，不然file標籤不會吻合覆蓋a標籤致使點擊按鈕的時候點不到file標籤

咱們再來測試一下：

點擊按鈕：

選擇文件：

上傳成功！