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

Use label to select image file but have attribute displayed input

本文关键字：属性 显示 输入 文件 标签 选择 图像      更新时间：2023-09-26

我希望有标签被用于项目的选择(所以选择文件)已经消失了。

我的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.

您需要使用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>

也可以显示文件的预览(当然如果是图像)在上传之前预览图像

JSFiddle

<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，因此我通过拆分字符串仅提取文件。

相关文章：