来自另一个元素单击的输入的javascript onChange [重复]答案

【问题标题】：javascript onChange from input clicked by another element [duplicate]来自另一个元素单击的输入的javascript onChange [重复]
【发布时间】：2018-04-10 00:43:09
【问题描述】：

已经发布了类似的主题，但是我发现没有一个可以解决我的问题。这是一个带有一些 javascript 的示例 html 页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
	<script>
		window.onload = function() {		
			var fileDlg = document.getElementById('fileDialog');			
			// this should detect onChange, but not working
			fileDlg.onchange = (e) => {
				window.alert('Changed: '+e.target.value);//
				//document.getElementById('frm_img_upload').submit();
			}// eo filedlg.onchange				
		}//eo window onload
	</script>		
  </head>
  <body>
	<form id="frm_img_upload" name="frm_img_upload"  method="post" enctype="multipart/form-data">
		<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
		<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
		<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
		<button onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
	</form>
  </body>
</html>

这个想法是隐藏超级烦人的输入文件类型元素，并创建一个带有 onclick 的按钮，该按钮将单击不可见的输入。这很好用，但是，一旦访问者选择了一个文件并且对话框关闭，我想提交表单，而不是按下另一个烦人的按钮。 onchange 没有触发。

我没有为此使用 jquery，只是好的 ol javascript。

有什么想法吗？

谢谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

您的按钮会在对话框关闭后立即提交表单，因为默认值为type="submit"，因此onchange 没有机会运行。

将其更改为 type="button"，然后您就会看到警报。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
	<script>
		window.onload = function() {		
			var fileDlg = document.getElementById('fileDialog');			
			// this should detect onChange, but not working
			fileDlg.onchange = (e) => {
				window.alert('Changed: '+e.target.value);//
				//document.getElementById('frm_img_upload').submit();
			}// eo filedlg.onchange				
		}//eo window onload
	</script>		
  </head>
  <body>
	<form id="frm_img_upload" name="frm_img_upload"  method="post" enctype="multipart/form-data">
		<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
		<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
		<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
		<button type="button" onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
	</form>
  </body>
</html>

【讨论】：

非常感谢！看不到那个。