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。