1. 首頁
  2. 問答
  3. 樣式輸入類型文件？

樣式輸入類型文件？

2011-02-05 79 views
34

是否可以對類型文件的輸入元素進行樣式設置而不必擔心瀏覽器的兼容性？在我的情況下，我需要實現一個背景圖像和圓形邊框（1px），如果可能的話，該按鈕也應該自定義。樣式輸入類型文件？

來源

2011-02-05 Banshee

回答

29

按照這些步驟，那麼你可以創建自定義樣式文件上傳表單：

1）這是一個簡單的HTML表單（請閱讀我在這裏寫婁HTML註釋）

<form action="#type your action here" method="POST" enctype="multipart/form-data"> 
    <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> 
    <!-- this is your file input tag, so i hide it!--> 
    <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> 
    <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> 
    <input type="submit" value='submit' > 
    </form>

2.）然後使用這個簡單的腳本將點擊事件傳遞給文件輸入標籤。

function getFile(){ 
     document.getElementById("upfile").click(); 
    }

現在，您可以使用任何類型的樣式，而無需擔心如何更改默認樣式。 我非常瞭解這一點，因爲我一直在嘗試將默認樣式更改爲一個半月。相信我這很難，因爲不同的瀏覽器有不同的上傳輸入標籤。所以使用這個來建立你自定義的文件上傳窗體。這裏是完整的AUTOMATED UPLOAD代碼。

<html> 
<style> 
#yourBtn{ 
    position: relative; 
    top: 150px; 
    font-family: calibri; 
    width: 150px; 
    padding: 10px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border: 1px dashed #BBB; 
    text-align: center; 
    background-color: #DDD; 
    cursor:pointer; 
    } 
</style> 
<script type="text/javascript"> 
function getFile(){ 
    document.getElementById("upfile").click(); 
} 
function sub(obj){ 
    var file = obj.value; 
    var fileName = file.split("\\"); 
    document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; 
    document.myForm.submit(); 
    event.preventDefault(); 
    } 
</script> 
<body> 
<center> 
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> 
<div id="yourBtn" onclick="getFile()">click to upload a file</div> 
<!-- this is your file input tag, so i hide it!--> 
<!-- i used the onchange event to fire the form submission--> 
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div> 
<!-- here you can have file submit button or you can write a simple script to upload the file automatically--> 
<!-- <input type="submit" value='submit' > --> 
</form> 
</center> 
</body> 
</html>

來源

2012-03-15 06:45:48 teshguru

+0

很好的解決方案。在輸入上使用'display：none'而不是'height：0px; width：0px; overflow：hidden;'將其從DOM /您的佈局中移除。 – 2016-04-27 22:39:54

8

通過Jquery的相同的解決方案。如果在頁面中有多個文件輸入，則工作。

$j(".filebutton").click(function() { 
    var input = $j(this).next().find('input'); 
    input.click(); 
}); 

$j(".fileinput").change(function(){ 

    var file = $j(this).val(); 
    var fileName = file.split("\\"); 
    var pai =$j(this).parent().parent().prev(); 
    pai.html(fileName[fileName.length-1]); 
    event.preventDefault(); 
});

來源

2012-03-28 19:06:02 Iris

+1

你能爲此發佈小提琴嗎？ – johannesMatevosyan 2016-03-15 10:20:49

3

在谷歌四處尋找了好久，嘗試了多種解決方案之後，兩個CSS，JavaScript和JQuery的，我發現，其中大多數是使用圖像作爲按鈕。其中一些難以使用，但我確實設法拼湊了一些最終爲我工作的東西。

的重要組成部分對我來說是：

  • 瀏覽按鈕必須是一個按鈕（不是圖像）。
  • 該按鈕必須具有懸停效果（使其看起來不錯）。
  • 文本和按鈕的寬度必須易於調整。
  • 該解決方案必須在IE8，FF，Chrome和Safari中工作。

這是我想出的解決方案。並希望它對其他人也有用。

更改.file_input_textbox的寬度以更改文本框的寬度。

更改.file_input_div，.file_input_button和.file_input_button_hover的寬度以更改按鈕的寬度。你也許需要調整一下位置。我從來沒有想過爲什麼...

要測試此解決方案，請創建一個新的html文件並將其粘貼到其中。

<html> 
<head> 

<style type="text/css"> 

.file_input_textbox {height:25px;width:200px;float:left; } 
.file_input_div  {position: relative;width:80px;height:26px;overflow: hidden; } 
.file_input_button {width: 80px;position:absolute;top:0px; 
        border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; } 
.file_input_button_hover{width:80px;position:absolute;top:0px; 
        border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; } 
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer; 
        opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; } 
</style> 
</head> 
<body> 
    <input type="text" id="fileName" class="file_input_textbox" readonly="readonly"> 
<div class="file_input_div"> 
    <input id="fileInputButton" type="button" value="Browse" class="file_input_button" /> 
    <input type="file" class="file_input_hidden" 
     onchange="javascript: document.getElementById('fileName').value = this.value" 
     onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';" 
     onmouseout="document.getElementById('fileInputButton').className='file_input_button';" /> 
</div> 
</body> 
</html>

來源

2012-06-01 09:00:22

+0

小提琴：https：//jsfiddle.net/gd4wuvga/ – Picard 2015-12-20 17:34:31

3

這裏有一個簡單的CSS唯一的解決方案，創建一個一致的目標區域，並讓你的風格你的人造元素，只要你喜歡。

的基本思路是這樣的：

  1. 有兩個「假」的元素（一個文本輸入/鏈接）作爲兄弟到你的真實文件輸入。絕對放置它們，使它們完全位於目標區域的頂部。
  2. 用div封裝您的文件輸入。將溢出設置爲隱藏（所以文件輸入不會溢出），並將其設置爲您希望目標區域的大小。
  3. 將文件輸入中的不透明度設置爲0，以便隱藏但仍可點擊。給它一個很大的字體大小，這樣你就可以點擊目標區域的所有部分。

這裏的的jsfiddle：http://jsfiddle.net/gwwar/nFLKU/

<form> 
    <input id="faux" type="text" placeholder="Upload a file from your computer" /> 
    <a href="#" id="browse">Browse </a> 
    <div id="wrapper"> 
     <input id="input" size="100" type="file" /> 
    </div> 
</form>

來源

2013-03-02 20:53:47

相關問題

 相關問題