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

【问题标题】：Use label to select image file but have attribute displayed input使用标签选择图像文件但有属性显示输入
【发布时间】：2015-09-01 07:51:09
【问题描述】：

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

这是我的 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。

【问题讨论】：

uploadFile 在哪里？ document.getElementsByClassName() 返回一个集合，因此您需要使用索引进行迭代，即 document.getElementsByClassName("uploadFile")[0].style
更新了 JS fiddle，还是没有运气。

标签： javascript html ruby-on-rails twitter-bootstrap

【解决方案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

【讨论】：

【解决方案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 模式，所以我通过拆分字符串仅提取文件。

【讨论】：