更改“选择没有文件”：(Change the “No file chosen”:)

2019-08-23 01:06发布

站内文章 / 移动开发

189 0

女痞

女 | 书童

私信

我有一个按钮“选择文件”如下（我用的玉，但它应该是一样的HTML5）：

 input(type='file', name='videoFile')

在浏览器这表明与旁边“不选择文件”文本的按钮。我想“无文件选择”文本变成别的东西，像“无视频选择”或“选择一个视频，请”。我跟着第一个建议，在这里：

我不希望看到的文件输入字段“没有选择文件”

但这样做并没有改变文本：

 input(type='file', name='videoFile', title = "Choose a video please")

任何人都可以帮我找出问题的根源所在？

Answer 1:

我敢肯定，你不能改变的按钮的默认标签，它们是硬编码在浏览器（每个浏览器渲染的按钮标题以自己的方式）。看看这个按钮样式文章

Answer 2:

隐藏与CSS的输入，添加标签，并将其分配给输入按钮。标签可点击和点击时，它会火起来的文件对话框。

<input type="file" id="files" class="hidden"/>
<label for="files">Select file</label>

然后，如果你想样式标签按钮的作用。

Answer 3:

http://jsfiddle.net/ZDgRG/

见上面的链接。我用CSS来隐藏默认的文本和使用标签，以显示我想要的东西：

<div><input type='file' title="Choose a video please" id="aa" onchange="pressed()"><label id="fileLabel">Choose file</label></div>

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

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

Answer 4:

试试这个它只是一招

<input type="file" name="uploadfile" id="img" style="display:none;"/>
<label for="img">Click me to upload image</label>

这个怎么运作

这是非常简单的。标签元素使用“的”标签按ID引用一个表单的元素。在这种情况下，我们使用“IMG”它们之间的参考项。一旦完成，只要你点击标签上，它会自动触发形式的元素点击事件是在我们的例子文件元素click事件。然后，我们使文件不可见的元素，通过使用显示：无，而不是visibility：hidden的，这样它不创建空的空间。

享受编码

Answer 5:

对了，有没有办法消除这种“choosen没有文件”，即使你有上传预文件的列表。

我发现（并在IE，FF，CR）简单的解决方法是以下

隐藏您的输入，并添加一个“文件”按钮
然后调用“文件”按钮，然后请他结合文件上传（我在这个例子中使用JQuery）

 $('.addfiles').on('click', function() { $('#fileupload').click();return false;});

 <button class="addfiles">Add Files</button> <input id="fileupload" type="file" name="files[]" multiple style='display: none;'>

它的完成，完美的作品:)

弗雷德

Answer 6:

但是，如果你尝试删除该工具提示

<input type='file' title=""/>

这不会工作。这是我的小把戏工作，请尝试冠军的空间。它将工作。:)

<input type='file' title=" "/>

Answer 7:

 $(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 8:

像这样的东西可以工作

input(type='file', name='videoFile', value = "Choose a video please")

Answer 9:

 .vendor_logo_hide{
      display: inline !important;;
      color: transparent;
      width: 99px;
    }
    .vendor_logo{
      display: block !important;
      color: black;
      width: 100%; 
    }

 $(document).ready(function() { // set text to select company logo $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>"); // on change $('#Uploadfile').change(function() { // show file name if ($("#Uploadfile").val().length > 0) { $(".file_placeholder").empty(); $('#Uploadfile').removeClass('vendor_logo_hide').addClass('vendor_logo'); console.log($("#Uploadfile").val()); } else { // show select company logo $('#Uploadfile').removeClass('vendor_logo').addClass('vendor_logo_hide'); $("#Uploadfile").after("<span class='file_placeholder'>Select Company Logo</span>"); } }); });

 .vendor_logo_hide { display: inline !important; ; color: transparent; width: 99px; } .vendor_logo { display: block !important; color: black; width: 100%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <input type="file" class="vendor_logo_hide" name="v_logo" id='Uploadfile'> <span class="fa fa-picture-o form-control-feedback"></span> <div> <p>Here defualt no choose file is set to select company logo. if File is selected then it will displays file name</p> </div>

Answer 10:

只要改变输入的宽度。大约90像素

<input type="file" style="width: 90px" />

Answer 11:

<div class="field">
    <label class="field-label" for="photo">Your photo</label>
    <input class="field-input" type="file" name="photo"  id="photo" value="photo" />
</div>

和CSS

input[type="file"]
{ 
   color: transparent; 
   background-color: #F89406; 
   border: 2px solid #34495e; 
   width: 100%; 
   height: 36px; 
   border-radius: 3px; 
}

Answer 12:

你可以试试这样说：

<div>
    <label for="user_audio" class="customform-control">Browse Computer</label>
    <input type='file' placeholder="Browse computer" id="user_audio"> <span id='val'></span>
 <span id='button'>Select File</span>
</div>

要显示所选择的文件：

$('#button').click(function () {
    $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function () {
    $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
    $('.customform-control').hide();
})

感谢@ unlucky13用于获取选定的文件名

这里是工作提琴：

http://jsfiddle.net/eamrmoc7/

Answer 13:

HTML

  <div class="fileUpload btn btn-primary">
    <label class="upload">
      <input name='Image' type="file"/>
    Upload Image
    </label>
  </div>

CSS

input[type="file"]
{
  display: none;
}
.fileUpload input.upload 
{
    display: inline-block;
}

注：BTN BTN-主要是一类引导按钮。但是按钮可能看起来weired位置。希望您可以通过内联CSS修复它。

Answer 14:

使用标签与标签文本改变

<input type="file" id="files" name="files" class="hidden"/>
<label for="files" id="lable_file">Select file</label>

添加的jQuery

<script>
     $("#files").change(function(){
        $("#lable_file").html($(this).val().split("\\").splice(-1,1)[0] || "Select file");     
     });
</script>

Answer 15:

这将帮助你更改名称为“没有文件选择，选择资料图片”

<input type='file'id="files" class="hidden"/>  
<label for="files">Select profile picture</label>

Answer 16:

我会用“按钮”，而不是“标签”，希望这帮助别人。

这只会显示一个按钮，用户点击会弹出文件选择，文件选择后，自动上传。

<button onclick='<%= "$(\"#" + FileUpload1.ClientID + "\").click(); return false;" %>'>The Text You Want</button>

<asp:FileUpload onchange="$('#btnUpload').click();" ID="FileUpload1" runat="server" style="display: none;" />

<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" OnClick="btnUpload_Click" style="display: none;" />

文章来源: Change the “No file chosen”: