1. 首頁
  2. 問答
  3. 使用CSS和上傳按鈕的功能設計樣式

使用CSS和上傳按鈕的功能設計樣式

2010-12-10 159 views
4

我和一個工作人員正在爲我們的客戶開發一個Web應用程序來登錄和管理這些細節。其中一個部分要求用戶上傳那裏的公司徽標，但因爲我們都知道html browes按鈕或標籤，因爲它也被稱爲硬cookie。這是我希望它看起來： alt text使用CSS和上傳按鈕的功能設計樣式

但現實是，如果我把一個普通的舊文件標籤在那裏它看起來平淡無奇，一般進出的地方，所以我用Google搜索的解決方案和一個之後狩獵我碰到這個代碼產生的代碼下面的圖片（這點我也顯示沒有設置爲零的不透明度文件上傳）：

#divinputfile 
{ 
height:85px; 
width:250px; 
margin:0px; 
background-image: url(images/upload_file.gif); 
background-repeat: no-repeat; 
background-position: right bottom; 
} 

#divinputfile #filepc 
{ 
opacity: 0.0; 
-moz-opacity: 0.0; 
filter: alpha(opacity=00); 
font-size:16px; 
cursor: pointer; 
} 

#filepc 
{ 
margin-top: 12px; 
} 

#fakeinputfile 
{ 
margin-top:-28px; 
} 

#fakeinputfile #fakefilepc 
{ 
width:250px; 
height:22px; 
font-size:18px; 
font-family:Arial; 
} 

<body> 
<br /> 
<div id="divinputfile"> 
    <div id="fakeinputfile"> 
    <br /> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
    </div> 
    <div align="right"> 
    <input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/> 
    </div> 
</div> 
</body>

alt text

這是一個基本的黑客，當我選擇樣式化的按鈕我真的選擇了不可見的上傳按鈕，然後是upl的值oad被傳遞到上面的測試框中，看起來像是它上傳的真正部分。這種方法的兩個問題，我希望你能幫助我在這裏是

a）只有按鈕可以點擊上傳。在大多數瀏覽器中（不包括Chrome瀏覽器），您可以點擊文本框以及按鈕上傳圖片。當然，這種方法的文件路徑的文本被添加到文本框，但任​​何改變該框不會改變文件，例如：如果你選擇file1.jpg上傳，但你真的想file2.jpg，改變文本路徑在文本框不會將事情改變爲ACTUAL上傳元素

b）Chrome和Opera等一些瀏覽器將\ fakepath \ filepath添加到文本框中，而這只是醜陋的，所以任何if語句都可以刪除它，這也會非常有用。

希望你們可以幫助我，如果不通過代碼提示，那麼如果有人知道一個好的JavaScript插件，節省一天。

謝謝

來源

2010-12-10 Daniel James Clarke

+0

可以使用CSS3.Go頁面：http://w3schools.com/css3/css3_borders.asp會讓你看看如何四捨五入你的按鈕角落.. – Rares 2012-02-17 09:52:29

回答

1

您已經有了用於文本框的javascript來顯示更改時的新文件路徑值。 這就是你將不得不刪除任何/虛假路徑/零件等的地方。

您還可以將一個點擊事件添加到文本框，它將激活文件瀏覽點擊事件。

我可以立即告訴你，用jQuery很容易，但我不知道如何用普通的JS做到這一點。

/電子郵件： 事實上，似乎文件輸入操作無法觸發。查看相關問題In JavaScript can I make a "click" event fire programmatically for a file input element?

來源

2010-12-10 01:15:42 Kissaki

+1

等待，如果它是* _impossible_ *與普通的o JavaScript（就像你鏈接到的其他問題所說的那樣）jQuery如何可以很容易？ – 2010-12-22 04:07:15

1

問題a： 沒有觸發點擊事件。安全和所有這一切。您可以像第一個一樣添加第二個不可見的上傳按鈕。如果有變化，則清除另一個。並且黑客堆積起來...

問題b： 請參閱Kissaki的答案。無論如何，你需要一些JS清除第二個隱形領域...

來源

2010-12-22 03:31:58 Hemlock

1

這是一個解決方案。

  1. 問題A通過使<input type="file" />成爲您的小部件的完整大小並使用部門創建不可點擊區域來解決。
  2. 問題B使用我發現here
<!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" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
#file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
#file-upload input { 
    width:97%; 
} 
#file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" /> 
    <div id="fake-file-upload"> 
     <input name="fakefilepc" type="text" id="fakefilepc" /> 
     <div id="no-click"></div> 
    </div> 
</div> 
</body>

您可能要擔心優雅降級的伎倆解決......這裏是用HTML，CSS相同和JavaScript更乾淨分離，這應該乾淨地降解。

<!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" xml:lang="en" lang="en"> 
<head> 
<title>Style the File Upload Input - Example</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("body").addClass("js"); 
     $("#file-upload").append("<div id=\"fake-file-upload\">" + 
         "<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" + 
         "<div id=\"no-click\"></div>" + 
        "</div>"); 
     $("#file-upload input[type='file']").change(function() { 
      var clone = this.cloneNode(true); 
      clone.type='text'; 
      document.getElementById('fakefilepc').value = clone.value?clone.value:this.value; 
     }); 
    }); 
</script> 
<style type="text/css"> 
#file-upload { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:250px; 
    height:65px; 
} 
body.js #file-upload { 
    overflow:hidden; 
    padding-top:15px; 
    background-image: url(images/upload_file.gif); 
    background-repeat: no-repeat; 
    background-position: right bottom; 
} 
body.js #file-upload input[type='file'] { 
    width:250px; 
    height:65px; 
    font-size:65px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    top:15px; 
    left:0px; 
    z-index:9; 
} 
body.js #file-upload input { 
    width:97%; 
} 
body.js #file-upload #no-click { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    z-index:10; 
    width:125px; 
    height:40px; 
} 
</style> 
</head> 
<body> 
<div id="file-upload"> 
    <input size="0" name="filepc" type="file" id="filepc" /> 
</div> 
</body>

我用下面的圖像作爲圖像images/upload_file.gif（及其各自的一切與之相關的尺寸）

alt text

來源

2010-12-22 04:51:54

1

這很難做，甚至更難跨瀏覽器。 Webkit（safari/chrome）的處理方式與IE和Mozilla完全不同。如圖所示，您最終將面臨大量的黑客攻擊，隨着它們的發佈，您將不斷需要檢查每個瀏覽器。

我發現的一種方法是逐步增強使用Flash插件。您只需檢查閃存是否存在，閃存塊是否阻止該元素。

例如：http://www.uploadify.com/demos/（雖然這似乎並沒有檢查是Flashblock！）

來源

2010-12-25 20:29:35 GlennG

相關問題

 相關問題