9

当我有一个文件上传字段时，

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

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

它会自动创建一个文本“未选择文件”和一个“浏览”按钮。

我想更改或删除此“未选择文件”文本。

反正有没有在css或Javascript中实现这一点？

谢谢

4

10 回答 10

32

您可以应用 css 规则，例如...

    input[type=file]{ 
        color:transparent;
    }
于 2014-08-16T09:40:55.083 回答
8

首先。你必须隐藏你的输入：

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();
});

示例小提琴

于 2013-08-23T08:30:52.760 回答
1 

$(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">

于 2015-04-30T13:05:49.090 回答
1

image您可以使用 jQuery 将输入的值设置为 "" 以删除选定的文件：

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

看到这个小提琴：

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

注意：这取决于所使用的浏览器。它适用于 FF 22 和 Chrome 29。

于 2013-08-23T08:26:24.093 回答
1 
<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>

查询：

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

演示：

http://jsfiddle.net/m44fp2yd/

于 2014-08-16T09:54:33.067 回答
1

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)
}

看看这个小提琴：

它可以满足您的需求。

小提琴 - 演示

此演示是对此的参考： stackoverflow question LINK

来自作者：&ersandre

于 2013-08-23T08:34:52.787 回答
1

我确信您不能更改按钮上的默认标签，它们在浏览器中是硬编码的（每个浏览器都以自己的方式呈现按钮标题）。check this 造型文章

于 2013-08-23T08:31:45.203 回答
0

No file chosen文本完全依赖于浏览器的渲染引擎——我假设你使用 Chrome 。如果你会看到 Firefox No file selected，在 IE 中你会看到一个灰色的文本框，根本没有任何价值。这是无法改变的。

另一种方法是使用插件（例如this），它可以让您完全控制文件控件的样式。

于 2013-08-23T08:26:48.867 回答
0

由浏览器来呈现文件上传框。每个人都以自己的方式做到这一点。例如，在我的 chrome 中，我可以看到No file chosen文本。使用 Firefox 的人可能会看到完全不同的东西。没有直接的方法来控制这个渲染过程。

但是，有一些技巧可以使用。有关详细信息，请查看此链接。

于 2013-08-23T08:27:19.477 回答
-1

此文本由浏览器显示不同的浏览器显示不同的消息

chrome show=未选择文件

Mozilla 显示=未选择文件

和ie一样

于 2013-08-23T08:27:42.303 回答