上传时不显示文件名

问题描述 投票:0回答:1

我有一个表格,我有一个上传图片的部分,但是当我上传图片的时候,她的名字并没有出现在标签上,我找到了一个代码,让它在部分工作,因为它不只显示图片名称,是的 "C:\ fakepath \图片名称",简而言之,我只想要图片名称,谢谢!。

表格。

<%= bootstrap_form_for(@var) do |f| %>
  <%= f.file_field :images, multiple: true, label: "Add an iamge" %>

JS显示 "C: \ fakepath \ image name"。

$(document).on('ready turbolinks:load', function() {
  $('.custom-file-input').change(function(){
    $('.custom-file-label').text(this.value);
  });
});
ruby-on-rails ruby bootstrap-4
1个回答
1
投票

// When working with turbolinks stop moshing your code inside of turbolinks:load and ready handlers. 
// Write delegated event handlers instead which are idempotent by design.
$(document).on('change', '.custom-file-input', function(e) { 
  // split file path by back or forward slashes
  let path = this.value.split(/^.*[\\\/]/);
  this.labels[0].innerText = path.slice(-1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label for="custom_file_input">Filename goes here</label>
  <input name="custom_file_input" id="custom_file_input" class="custom-file-input" type="file"/>
</form>
© www.soinside.com 2019 - 2024. All rights reserved.