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

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