Question

我希望标签用于选择项目（因此选择文件）已经消失。

这是我的HTMl：

<div class="form-group">
   <label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
   <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>

它有效，虽然我没有图像显示实际显示的名称（这是输入标签的一部分）

这是尝试使其显示的js（100％可编辑）：

document.getElementsByClassName("trigger").onClick = function () {
  document.getElementsByClassName("uploadFile").style.display = 'block';
  document.getElementsByClassName("uploadFile").value = this.value;
};

尝试：

document.getElementsByClassName("trigger").onClick = function () {
  document.getElementsByClassName("uploadFile")[0].style.display = 'block';
  document.getElementsByClassName("uploadFile")[0].value = this.value;
};

没有运气。

的jsfiddle： http://jsfiddle.net/07zw6h3q/

我迷失了只是文件名显示，没有添加一些疯狂的javascript。简单的东西。使用Rails 4.2和Bootstrap。

Answer 1

您需要使用change事件。

$('.uploadBtn').change(function(){
  var a = $(this).val().split('\\');
  $('.trigger').html(a[a.length - 1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
  <input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>

此外，您还可以显示文件的预览（如果是图像的话）Preview an image before it is uploaded

Answer 2

JSFiddle

<强> HTML

<div class="form-group">
    <label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label>
    <input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" />
    <label id="broker_image_name">no selected file</label>
</div>

<强>的JavaScript

var upload_button = document.getElementById("broker_image");

upload_button.addEventListener("change", function() {
    var file_name = upload_button.value;

    /* 
        the file come like this : C:\fakepath\file.htm
        so we only need the file name
    */
    file_name = file_name.split("\\"); // preventing \ to be escaped himself
    var file_name_length = file_name.length;

    file_name = file_name[file_name_length - 1];

    var broker_image_name = document.getElementById("broker_image_name");

    broker_image_name.innerHTML = file_name;
});

我使用事件change来更改文件名，这是我在你的按钮之后放置的附加标签（顺便说一下我的风格）并且用文件名更新。

您会看到文件名值的注释部分，因为在用户选择文件名后返回文件名时，它会附带模式C:\fakepath\myFile.htm，因此我只通过拆分字符串来提取文件。

使用标签选择图像文件但具有属性显示输入

2 个答案: