如何顯示在輸入類型文件中選擇哪個文件？

使用下面的代碼，我編輯我的輸入類型文件按鈕的樣式。我現在得到的問題是它沒有顯示哪個文件用戶選擇了。我不知道如何做到這一點.. :(如何顯示在輸入類型文件中選擇哪個文件？

HTML代碼：

<div class="giz-upload"> 
<input type="file" size="40" name="d4p_attachment[]"> 
</div>

的style.css

div.giz-upload{ 
    width: 157px; 
    height: 57px; 
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png); 
background-size: 80px 60px; 
background-repeat:no-repeat; 
overflow: hidden; 
} 

div.giz-upload input { 
    display: block !important; 
    width: 157px !important; 
    height: 57px !important; 
    opacity: 0 !important; 
    overflow: hidden !important; 
}

這裏的jsfiddle網址：http://jsfiddle.net/sunita1993/avn9n6sp/

來源

2015-04-02 Sunita Parab

和地點將顯示，當你隱藏輸入文件名的例子嗎？ – adeneo 2015-04-02 10:21:36

是的我知道，但有沒有什麼辦法來顯示選定的文件，但沒有那個瀏覽按鈕？ – 2015-04-02 10:22:26

http://jsfiddle.net/avn9n6sp/1/ – adeneo 2015-04-02 10:29:35

請檢查以下代碼，希望它能起作用:)

$('input[type=file]').change(function (e) { 
 
    $(this).parents('.giz-upload').find('.element-to-paste-filename').text(e.target.files[0].name); 
 
});

.giz-upload { 
 
    display: block !important; 
 
    height: 57px !important; 
 
    background: url(http://www.gizmoids.com/wp-content/sicons/upload.png); 
 
    background-size: 80px 60px; 
 
    background-repeat:no-repeat; 
 
    padding-left: 90px; 
 
} 
 
.giz-upload input { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<label class="giz-upload"> 
 
    <input type="file" size="40" name="d4p_attachment[]" /> 
 
    <span class="element-to-paste-filename"></span> 
 
</label>

來源

2015-04-02 10:27:34 w3debugger

你可以用javascript來做到。我讓你使用jQuery框架的例子：

$(function() { 

    $("input").on("change", function() { 

     var file = this.files; 
     console.log(file); 

    }); 

});

當您選擇一個文件的輸入值將改變您可以訪問該文件，file變量將包含從該文件與數據的對象，你可以讓你從它需要的東西，並把它span元件上，或者您想

上JsFiddle

來源

2015-04-02 10:29:56 abaracedo

如何顯示在輸入類型文件中選擇哪個文件？

回答

相關問題