![](/img/trans.png)
[英]how to remove no file selected and place the file name which is uploaded successfully using jquery in input type file
[英]How to show which file is selected in Input type File?
使用下面的這段代碼,我編輯了我的 INPUT TYPE FILE 按鈕的樣式。 我現在遇到的問題是它沒有顯示用戶選擇了哪個文件。 我不知道該怎么做.. :(
HTML代碼:
<div class="giz-upload">
<input type="file" size="40" name="d4p_attachment[]">
</div>
樣式文件
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/
請檢查以下代碼,希望它會起作用:)
$('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>
您可以使用 javascript 來完成。 我給你一個使用 jQuery 框架的例子:
$(function() {
$("input").on("change", function() {
var file = this.files;
console.log(file);
});
});
當您選擇一個文件時,輸入值將更改您可以訪問該文件, file
變量將包含一個帶有文件中數據的對象,您可以從中獲取所需內容並將其放在span
元素或您想要的位置
JsFiddle 的一個例子
因為在div.giz-upload input
您已將opacity
屬性設置為 0。
刪除不透明度,它將顯示文件名。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.