HTML如何刪除FileUpload字段中的文本？

Question

當我有一個文件上傳字段時，

<form action="" method="post" enctype="multipart/form-data">
    <input id="image" type="file" name="image">
</form>

http://jsfiddle.net/jakeaustin5574/6DzgU/

它會自動創建“無文件選擇”文本和“瀏覽”按鈕。

我想更改或刪除此“未選擇文件”文本。

無論如何在css或Javascript中實現這一點？

謝謝

Answer 1

您可以應用css規則，如...

  input[type=file]{ color:transparent; } 

Answer 2

首先。 你必須隱藏你的輸入：

input#image{position:fixed;top:-100px;}

其次，你必須用你的皮膚創建替代按鈕：

<form action="" method="post" enctype="multipart/form-data">
   <input id="image" type="file" name="image">
   <button id="image_alt">Select image</button>
</form>

最后一步是創建一個javascript腳本，鏈接替代按鈕與原始按鈕：

document.getElementById('image_alt').addEventListener('click',function(){
    document.getElementById('image').click();
});

示例小提琴

Answer 3

您可以使用jQuery將輸入的image值設置為“”以刪除所選文件：

$("#image").val("")

看到這個小提琴：

http://jsfiddle.net/nfvR9/1/

注意：這取決於使用的瀏覽器。 它適用於FF 22和Chrome 29。

Answer 4

我確信您無法更改按鈕上的默認標簽，它們在瀏覽器中是硬編碼的（每個瀏覽器都以自己的方式呈現按鈕標題）。 check this 造型文章

Answer 5

HTML：

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS：

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

看看這個小提琴 ：

它的工作滿足您的需求。

FIDDLE - DEMO

這個演示了它的一個參考： stackoverflow問題 LINK

來自autor：＆ampersandre

Answer 6

 $(function () { $('input[type="file"]').change(function () { if ($(this).val() != "") { $(this).css('color', '#333'); }else{ $(this).css('color', 'transparent'); } }); }) 

 input[type="file"]{ color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="app_cvupload" class="fullwidth input rqd"> 

Answer 7

No file chosen text完全依賴於瀏覽器呈現引擎 - 我假設您使用Chrome。 如果Firefox你會看到No file selected ，在IE中你會得到一個沒有任何價值的灰色文本框。 這不能改變。

另一種方法是使用一個插件（例如這個 ），它可以讓你完全控制文件控件的樣式。

Answer 8

由瀏覽器來渲染文件上傳框。 每個人都以自己的方式做到這一點。 例如，在我的chrome中，我可以看到No file chosen text。 使用Firefox的人可能會完全看到其他內容。 沒有直接的方法來控制此渲染過程。

但是，有一些黑客可以使用。 有關詳細信息，請查看此鏈接 。

Answer 9

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
 <img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
 <input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -25px; left: -1px" />
</div>
<a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a>

JQuery的：

function getFileName() {
    var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
    $("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
       getFileName();
});

演示：

http://jsfiddle.net/m44fp2yd/

Answer 10

本文通過瀏覽器顯示不同瀏覽器顯示的不同消息

chrome show =沒有文件選擇

mozilla show =未選擇任何文件

和ie一樣