圖片上瀏覽和上傳文件按鈕

我用下面的代碼具有文本框：

CSS

.uploadpathdiv 
    { 
    margin:0; 
    height:44px; 
    width:464px; 
    background:url('images/img-upload.png') no-repeat bottom; 
    } 


.uploadpath 
{ 
background:none; 
border:none; 
width:400px; 
height:40px; 
margin:0; 
padding: 2px 7px 0px 7px; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
}

HTML

<div class="uploadpathdiv"> 
<input class="uploadpath" name="path" type="text" /> 
</div> 
<img src="/themes/scaccarium/images/button-upload.png" /> 
<img src="/themes/scaccarium/images/button-browse.png" />

該圖片代碼是用於「瀏覽」和「上傳」按鈕。

請幫我修改上面的代碼，以便當我按瀏覽按鈕時，我會得到「文件選擇選項」，就像您在使用<input type = "file" name="browse">時看到的那樣。其次，文件的路徑必須顯示在上面的文本框中。

再次當我按下上傳按鈕，應該將該文件上傳

來源

2010-06-29 fawad

這是無法通過CSS來定位文件上傳控件的「瀏覽...」按鈕。

一個基於HTML的解決方法可以在這裏找到：Styling an input type="file" 不知道它是否可以做到你所需要的，但我認爲這是最接近你可以得到的。

如果你想完全控制控制（沒有雙關語意圖），你將不得不使用基於Flash的上傳，如SWFUpload。請注意，這些上傳者與普通文件上傳控件的工作方式有些不同，因此您可能需要更改工作流程才能使其工作，並決定是否值得您付出努力。

來源

2010-06-29 19:18:41 Unicron

非常感謝你，它看起來像我想要的。 – fawad 2010-06-29 19:27:39

大多數我們平時使用的樣式表單控件不會對上傳控制任何影響的CSS屬性的，有辦法的風格吧，一個很好的例子是Here

這種技術基本上設置的不透明度將控件設置爲0，並在其下放置另一個「樣式」按鈕。因此當點擊樣式按鈕時，您實際上是在點擊上傳控件。

我花了很多時間與客戶端的自定義文件上傳控件作鬥爭，並發現迄今爲止最好的方法是使用Valums jquery file uploader一切都已經建成，你可以自定義多達你想要的，也有拖放功能。

來源

2013-03-14 06:39:56 Marz

如果使用標籤標籤標記圖像，則可以單擊圖像並選擇瀏覽按鈕。

<div id="fileInput"> 
    <label for="FileID"><img src="ImageURL"></label> 
    <input type="file" id="FileID"/> 
</div>

來源

2013-09-04 07:30:50

好主意的人。 – 2015-12-14 14:48:47

圖片上瀏覽和上傳文件按鈕

回答

相關問題