上传时文件名不显示

Question

我有一个表格，我有一个上传图片的部分，但是当我上传图片时，她的名字没有出现在标签上，我找到了一个代码使它部分工作，因为它不只显示图片名和是“C:\fakepath\图片名”，总之就是要图片名，谢谢！

表格：

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

显示“C:\fakepath\image name”的JS：

$(document).on('ready turbolinks:load', function() {
  $('.custom-file-input').change(function(){
    $('.custom-file-label').text(this.value);
  });
});

Answer 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>