風格的文件上傳按鈕，而無需使用javascript

我正在一個網站上的客戶端不希望任何JavaScript被使用。我已經使用下面的一段代碼成功地爲我的網站設計了文件更新按鈕。風格的文件上傳按鈕，而無需使用javascript

.btn-file { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.btn-file input[type=file] { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    font-size: 100px; 
 
    text-align: right; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    outline: none; 
 
    background: white; 
 
    cursor: inherit; 
 
    display: block; 
 
}

<label class="btn btn-default btn-file"> 
 
    Browse 
 
    <input type="file" style="display: none;"> 
 
</label>

然而，一旦選擇了文件，而不使用JavaScript我不能顯示按鈕旁邊的文件名等在下面的例子。

任何建議，以做到這一點使用瀏覽器傳統的上傳按鈕？

來源

2016-09-30 Zain Khan

只是我的想法，但您可以在服務器端有一個監聽器，用於文件上傳時修改頁面。例如，上傳文件時，重新加載頁面，並在發送頁面請求時，將文件名稱作爲頁面呈現時的參數。 –

你有權訪問後端，如果有的話是使用什麼軟件？ –

在用戶工作時重新加載頁面沒有意義。也是在浪費服務器處理時間。 –

通過設置的z-index的瀏覽按鈕，你可以嘗試：

.btn-file { 
 
    position: absolute; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    z-index: 2; 
 
    min-width: 84px; 
 
    min-height: 35px; 
 
    background-color: white; 
 
    border: 3px solid cyan; 
 
    top: 0; 
 
    left: 1; 
 
} 
 
input[type=file] { 
 
    float: left; 
 
    position: relative; 
 
    background: white; 
 
    cursor: pointer; 
 
    background-color: white; 
 
}

<label class="btn btn-default "> 
 
    <span class="btn-file">Browse</span> 
 
    <input type="file"> 
 
</label>

另一種方法是使用自舉：

https://jsfiddle.net/wesfe5jy/3/

來源

2017-02-01 05:05:55

風格的文件上傳按鈕，而無需使用javascript

回答

相關問題