造型上傳字段

我正在嘗試設計一個上傳字段，並且我已經花了很多時間試圖修復它而沒有成功。我已經創建了一個簡單的jsfiddle來演示問題（如果你閱讀快速閱讀只讀粗體的要點）。造型上傳字段

火狐7：

CSS3圓角（OK）
文字陰影（OK）
手光標僅出現在標籤（不正常的下半部，我希望手形光標應該可以看到懸停在標籤的任何一點）

IE 8：

沒有圓角（看起來差，但就是OK）
沒有文字陰影（沒問題，我知道有沒有爲它的支持）
手光標僅出現在標籤的下半部分（不好，我希望手形光標應該可見懸停在標籤的任何一點）
單擊標籤的上半部分文件上傳對話框不顯示（不是好的，我希望通過點擊la的任何一點來打開對話框BEL，像FF）
點擊它會出現一個閃爍的光標後（怪異，但誰到底在乎這個）

任何人有想法？

UPDATE：根據輸入的接收，here is another approach in jsfiddle：我建立一個按鈕，我綁定按鈕的單擊事件的單擊事件發送到文件上傳輸入。

下面是一些兼容性測試：

IE 6的WinXP：工作
IE 7的WinXP：工作
IE 8 Win7的：工作
FF 7的Linux：工作
FF 8 Win7：作品
Opera 11 Win7/Linux：不起作用
Chrome 15 Win7/Linux：不工作
Safari瀏覽器3.1的MacOSX：不工作

更新2：越來越近，在這個jsfiddle我在一些瀏覽器測試扔，在MSIE或Mozilla我用新辦法的情況下，否則舊的。

IE 6的WinXP：工作
IE 7的WinXP：工作
IE 8 Win7的：工作
FF 7的Linux：工作
FF 8 Win7的：工作
歌劇11的Win7/Linux：不起作用
Chrome 15 Win7/Linux：作品
Safari 3.1 MacOSX：作品

所以我猜Opera不會因爲z-index而工作，要在下一個版本中修復它。

UPDATE 3：new version在Opera中也有效。 Opera標籤高度降低，因此標籤的所有區域均可點擊。所以現在它適用於我關心的所有瀏覽器，並且在外觀上可以接受。問題解決了。

來源

2011-11-16 stivlo

它可能看起來愚蠢的，但爲什麼不隱藏目標文件，並使用圖片或一些一個是一個按鈕？ – 2011-11-16 18:42:32

要補充一點，手形光標問題也是Google Chrome中的一個問題。 – JasCav

@Márcio因爲它不是一個按鈕，上傳事件受瀏覽器保護，您不能將它關聯到圖像或按鈕。 – stivlo

我已經回答我的問題，因爲其他的答案是不所有的瀏覽器部分解決方案。特別是我在MacOSX上支持IE 6，IE 7，IE 8，Chrome 15，Opera 11，FF 7，FF 8，Safari 3.1。它很可能也適用於其他瀏覽器，但這是我可以測試的，因爲我已經在我的電腦和虛擬機上了。

最後，我的顧客選擇了smaller and more sober version。新版本還包含更短的HTML，JavaScript和CSS。

HTML

<form enctype="multipart/form-data" method="POST" action=""> 
    <div class="fileupload-buttonbar">  
    </div> 
</form>

CSS

.file-upload { 
    overflow: hidden; 
    display: inline-block; 
    position: relative;  
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    background: #5A5A5A; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    cursor:pointer; 
    font-size: 8.5px; 
    font-family: Arial; 
} 

.file-upload:hover { 
    background: #808080; 
} 

.file-upload input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    z-index:2; 
} 

.file-upload { height: 14px; width: 115px; }

的JavaScript

var html = ''; 
if ($.browser.mozilla || $.browser.msie) { 
    html = '<input type="button" class="file-upload" ' 
     + 'value="SCEGLI FOTO..."/><input id="uploadfile" ' 
     + 'name="uploadfile" multiple="" type="file"/>'; 
    $('.fileupload-buttonbar').html(html); 
    $('#uploadfile').hide(); 
    $('.file-upload').click(function() { 
     $('#uploadfile').click(); 
    }); 
} else { 
    html = '<label class="file-upload"><span>SCEGLI FOTO...</span> ' 
     + '<input name="uploadfile" multiple="" type="file"/></label>'; 
    $('.fileupload-buttonbar').html(html); 
}

來源

2011-11-18 13:01:22 stivlo

IE 8：

添加的z-index你輸入規則..瞧

.file-upload input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    font-size: 12px; 
    opacity: 0; 
    filter: alpha(opacity=0.0); 
    z-index:-1; 
}

編輯：更容易看到什麼是在FF發生與以下CSS ...

.file-upload { 
    overflow: hidden; 
    display: inline-block; 
    position: relative;  
    vertical-align: middle; 
    text-align: center; 
    color: #fff; 
    border: 2px solid #707070; 
    background: #A0A0A0; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border-radius: 8px; 
    text-shadow: #000 1px 1px 4px; 
    cursor:pointer; 
} 

.file-upload:hover { 
    background: #2FA2FF; 
} 
.file-upload.focus { 
    outline: 2px solid yellow; 
} 

.file-upload input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0; 
    height: 38px; 
    font-size: 12px; 
    -moz-opacity:50; 
    filter: alpha(opacity=0); 
    opacity: 50; 
    z-index:2; 
    cursor:pointer; 
} 

.file-upload span { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: inline-block; 
    padding-top: .45em; 
    z-index:1; 
} 

.file-upload { height: 38px; } 
.file-upload, 
.file-upload span { width: 160px; }  

.file-upload-status { 
    margin-left: 10px; 
    vertical-align: middle; 
    padding: 7px 11px; 
    font-weight: bold;  
    font-size: 16px; 
    color: #888; 
    background: #f8f8f8; 
    border: 3px solid #ddd; 
}

來源

2011-11-16 18:44:26

謝謝哈利，我用你的建議創建了一個[new fiddle]（http://jsfiddle.net/PXRpk/5/）。它在IE和Chrome中運行良好，但是在FF中無法打開文件請求者。 – stivlo

所以，我的建議是，你隱藏你的輸入文件，並使用另一個對象，如圖像或風格化的輸入文本來得到你想要的，對吧？這個非常簡單的代碼說明我在說什麼：

<!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Teste</title> 

    <script type="text/javascript"> 
    function File() 
    { 
     var f = document.getElementById("file"); 
     f.click(); 
     document.getElementById("file_path").value = f.value; 
    } 

    function ReturnFile(f) 
    { 
     document.getElementById("file_path").value = f.value; 
    } 
    </script> 
</head> 

<body> 

<input type="file" id="file" onchange="ReturnFile(this)" /><br /><br /> 

<input type="button" onclick="File()" value="Send a file..." /> 
<div onclick="File()">Send a file...</div> 
<a href="javascript: void(0)" onclick="File()">Send a file...</a><br /> 
<img src="your_image.png" onclick="File()" alt="Send a file..." /><br /><br /> 

<input type="text" id="file_path" /> 

</body> 
</html>

注意與click事件的對象是你的按鈕，ID爲「FILE_PATH」文本輸入返回文件輸入的值相同。因此，當隱藏文件時，您使用文本輸入或whatelse將文件顯示給用戶。

另一個重要的事情是，在File函數的第三行，它將文件輸入的值設置爲文本輸入。但它只在IE中起作用，導致它停止並在click事件被觸發時等待用戶返回。其他瀏覽器不會等待並通過它。所以我在文件輸入上放置了一個onchange事件來完成同樣的工作來處理其他瀏覽器。

希望它可以幫助你......

來源

2011-11-17 11:05:34

感謝Márcio我準備了一個[jsfiddle]（http://jsfiddle.net/DGtwF/1/），我要測試這個方法，只考慮圖像「按鈕」，其他所有我不感興趣的部分文件上傳，輸入字段，鏈接）。 – stivlo

在Opera中不起作用，點擊圖像不會帶來什麼。請注意我的更新2，其中包含我正在測試的所有瀏覽器的列表以及我的列表中的所有瀏覽器均可用的更新3。 – stivlo

造型上傳字段

回答

相關問題