自定义文件输入按钮不会选择文件答案

【问题标题】：Custom file input button won't select files自定义文件输入按钮不会选择文件
【发布时间】：2018-08-18 04:11:58
【问题描述】：

我正在尝试使用 css/javascript 创建一个简单的文件选择按钮。我现在遇到的问题是，当我单击自定义按钮以激活隐藏文件输入按钮时，它被认为是空的。如何使用 simple_form 输入和普通 html 按钮激活隐藏文件输入按钮？

//story.js
$(document).ready(function () {
	let realFileBtn = document.getElementById("story_story_video");
	let customBtn = document.getElementById("story-file-upload-btn");
	let customText = document.getElementById("story-file-upload-text");

	if(customBtn){
		customBtn.addEventListener("click", function () {
			realFileBtn.click();
		});
	}


	realFileBtn.addEventListener("change", function () {
		if (realFileBtn.value) {
			customText.innerHTML = realFileBtn.value;
		} else {
			customText.innerHTML = "No video selected"
		}
	});
});

//story.scss

//Real File Upload Button
#story_story_video {
  display: none;
}

// Custom File Input Button
#story-file-upload-btn {
  background-color: #bf318d;
  color: #ffffff;
  padding: 10px;
  border-radius: 0.12em;
  border: 1px solid #6a6a6a;
  transition: 0.3s;
}

#story-file-upload-btn:hover {
  background: #942a69;
  cursor: pointer;
}

// Custom Text that shows which file you chose
.story-file-upload-text {
  margin-left: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #aaaaaa;
}

<!--_form.html.erb-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
	<button type="button" id="story-file-upload-btn">Select Video</button>
  <br>
	<%= f.input :story_video, class: 'form-control', label: false %>
	<span id="story-file-upload-text">No video selected</span>
</div>

JavaScript 堆栈跟踪

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at HTMLDocument.<anonymous> (story_file_upload_btn.self-eb557f85ebb94b2e2cbd43807a4fc248af863cd160e98e593784d35dfff6daf2.js?body=1:13)
    at mightThrow (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3584)
    at process (jquery3.self-06c43429d1047ce3f355da574d8a9750209971b8b1b8f264f91f5518c5fcc060.js?body=1:3652)

【问题讨论】：

标签： javascript jquery html ruby-on-rails

【解决方案1】：

对于文件输入，你需要使用file_field:

<%= f.file_field :story_video, class: 'form-control', label: false %>

另外，如果您使用form_with 而不是form_for，则需要明确指定输入ID，因为form_with 不会生成ID。

【讨论】：

我正在使用 simple_form。我去看看是不是这个问题。
customBtn 事件监听器似乎有问题。因为，我在模态中加载这个按钮。从按钮获取响应的方式可能存在问题。
错误告诉你页面加载时元素不存在。模态是否存在于 DOM 中，还是动态附加的？因为如果是后者，那么您必须仅在显示模式后附加事件侦听器。
它通过 AJAX/Rails Partials 动态附加。这肯定是问题所在，因为到目前为止我没有测试过其他解决方案。

【解决方案2】：

我选择使用 jasny，因为它是一种行之有效的解决方案，而且用途广泛。

更新代码

 <div class="form-group">
        <div class="fileinput fileinput-new"  data-provides="fileinput">
          <span class="btn story-file-upload-btn btn-file"><span class="fileinput-new">Select Video</span><span class="fileinput-exists">Change Video</span><input type="file" name="..."></span>
          <span class="fileinput-filename"></span>
          <%= f.input :story_video, as: :file, class: 'form-control', input_html: {hidden: true, accept: ('video/mp4')}, label: false %>
          <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
        </div>

【讨论】：