Question

我试图创建一个调用＆＃34;文件＆＃34;的事件的按钮。输入类型，以便输入本身不显示，我可以按照this帖子的方式设置按钮的样式。表格看起来像这样：

<form action="imageUpload.php" method="post" enctype="multipart/form-data" >
    <input type="file" id="selectedImage" style="display: none;" onchange="this.form.submit()" />
    <button onclick="document.getElementById('selectedImage').click();" />
</form>

当我点击按钮时，弹出文件选择对话框，但是＆＃34; imageUpload.php＆＃34;在拾取文件之前已经调用过。然而，当我通过移除按钮并显示输入本身取出中间人时，它按预期工作：＆＃34; imageUpload.php＆＃34;在选择文件后调用。

我假设＆＃34; .click（）;＆＃34;功能触发＆＃34; onchange＆＃34;，即使值没有改变。它是否正确？有没有办法从另一个按钮触发fileselect对话而不立即调用onchange？或者有没有办法检查是否在onchange中选择了文件？

提前致谢。

Answer 1

<button>的默认类型是提交。

在您关联的示例中，他们指定了这样的按钮：<button type="button">。通过给它这样的类型，表单不会被提交。

请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

注意：这仅用于解释目的。你必须根据需要修改代码。表单提交可能会显示错误，因为我们发布了一些随机网址。

所以，让我们试着打破这个：

＆＃13;

function showFile(){
  // lets trigger the file click as its hidden.
   document.getElementById('fileControl').click();
}


function sub(){
// check if your user has selected any file?
if(document.getElementById('fileControl').files.length > 0){
// if you are curius to see your files log this
//console.log(document.getElementById('fileControl').files);
// do post your form here by 
  document.getElementById('testForm').submit();
 }
}

＆＃13;

<!-- Change the action URL to what you want-->
<form method="post" action="example.com" id="testForm">
<!-- Lets have hidden file control that calls the some method to submit form-->
<input type="file" id="fileControl" onchange="sub();" style="display:none;">
<!-- Lets have a button to open file dialog-->
<input type="button" id="btn" value="open" onclick="showFile();">
</form>

＆＃13;

＆＃34;。点击（）;＆＃34;触发＆＃34; onchange＆＃34;

2 个答案: