解決input file按鈕要點擊兩次才彈出選擇文件窗口

時間 2019-11-11

標籤解決 input file 按鈕點擊兩次彈出選擇文件窗口简体版

原文原文鏈接

在隱藏的文件輸入框上調用click()方法

從Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)開始，你能夠隱藏掉默認的的文件輸入框<input>元素，使用自定義的界面來充當打開文件選擇對話框的按鈕。實現起來很簡單，你只須要使用樣式display:none把本來的文件輸入框隱藏掉，而後在須要的時候調用它的click()方法就好了。css

考慮下面的HTML：html

<input type="file" id="fileElem" multiple accept="image/*" style="display：none" onchange="handleFiles(this.files)"><a href="#" id="fileSelect">Select some files</a>

處理 click 事件的代碼以下：web

var fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"}, false);

這樣，你就能任意改變這個文件選擇按鈕的樣式了。chrome

參考：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications#%E5%9C%A8%E9%9A%90%E8%97%8F%E7%9A%84%E6%96%87%E4%BB%B6%E8%BE%93%E5%85%A5%E6%A1%86%E4%B8%8A%E8%B0%83%E7%94%A8click%28%29%E6%96%B9%E6%B3%95segmentfault

https://segmentfault.com/q/1010000004430586
安全

方法二：
app

相信不少人都碰到過這個問題，文件上傳控件透明後有的要點擊兩次才能彈出選擇文件窗口，這裏將將介紹如何避免要雙擊，只須要單擊是能夠實現的。原本一直無意留意這個圖片上傳file按鈕的BUG，由於有時候爲了效果好看有時候咱們要作點什麼好比隱藏input模擬點擊。FF能夠chrome也可以，惟獨IE不行，報安全錯誤。因此仍是得找方法解決，最終在某網站找到了，只是把input按鈕的透明度改成0而後定位到最頂層，雖然透明，不表示沒有，這樣點擊上傳時不影響效果又能實現所要的效果。真心不錯。方法其實很簡單。下面就介紹如何操做。網站

示例效果解圖以下：ui

一、特別注意樣式的寫法。跟文件上傳控件的參數this

值得注意的是height:130%，font-size:100px，這樣顯示上傳的文字就會變大，把點擊的區域變大了，這樣就能夠單擊能夠了。樣式以下：

.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:100%;z-index:1;opacity:0;filter:alpha(opacity=0);}

二、完整代碼以下：

<!DOCTYPE>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>file點擊上傳控件</title>  
<style>  
.upload{width:100px;height:100px;line-height:100px;position:relative;border:1px solid #ddd;background:#f6f6f6;text-align:center;color:#333;overflow:hidden;}  
#fileupload{position:absolute;bottom:0;left:0;font-size:100px;height:130%;width:100%;z-index:1;opacity:0;filter:alpha(opacity=0);}  
</style>  
</head>  
  
<body>  
<div class="upload">  
    點擊上傳  
    <input type="file" id="fileupload" size="100" />  
</div>  
</body>  
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。