Question

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

＆＃13;

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

＆＃13;

这个想法是隐藏超级烦人的输入文件类型元素，并创建一个带有onclick的按钮，它将点击不可见的输入。这工作正常，花花公子，但是，一旦访问者选择了一个文件并关闭了对话框，我想提交表单，而不是按下另一个烦人的按钮。 onchange没有开火。

我没有使用jquery，只是很好的javascript。

有什么想法吗？

感谢。

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

javascript onChange来自另一个元素点击的输入

1 个答案: