Javascript 在选择文件之前发送的表单

因此，我有一个HTML格式的标准表单，带有输入字段，最后一个输入是type=“file”。由于没有css方法来设计这个输入，我通过使它的高度和宽度=0来使这个输入不可见。然后把这个不可见的输入“放在上面”，这个按钮是我想设计的。按钮的工作原理与预期相同，但最后当我填写所有表单并按下此按钮选择文件时，它会打开一个窗口选择文件，同时发送表单。因此，结果它发送了没有文件的表单。据我所知，它是如何作为sumbition输入的

那么如何解决这个问题呢？这个按钮只选择文件而不发送表单？对于发送表单，我有输入类型=提交

因此，html表单的一部分：

<input type="file" name="file_up" id="upload_hidden" accept="image/*,image/jpeg" onchange="document.getElementById('upload_visible').value=this.value">
<button onclick="document.getElementById('upload_hidden').click();" id="upload_visible">+</button>
<input  type="submit" name="registr" value="Ready" size=15 id="reg_cmpl" />

+
一个
的默认
类型是
submit

如果您不想在单击表单时提交表单，首先不要使用提交按钮
 一个
的默认
类型是
submit

如果您不想在单击表单时提交表单，首先不要使用提交按钮
 
是
type=“submit”

将其显式设置为
type=“button”

<input type="file" name="file_up" id="upload_hidden" accept="image/*,image/jpeg" onchange="document.getElementById('upload_visible').value=this.value">
<button type="button" onclick="document.getElementById('upload_hidden').click();" id="upload_visible">+</button>
<input  type="submit" name="registr" value="Ready" size=15 id="reg_cmpl" />


+
是
type=“submit”

将其显式设置为
type=“button”

<input type="file" name="file_up" id="upload_hidden" accept="image/*,image/jpeg" onchange="document.getElementById('upload_visible').value=this.value">
<button type="button" onclick="document.getElementById('upload_hidden').click();" id="upload_visible">+</button>
<input  type="submit" name="registr" value="Ready" size=15 id="reg_cmpl" />


+
只需更改按钮类型，然后按如下方式重试：-

<input type="file" name="file_up" id="upload_hidden" accept="image/*,image/jpeg" onchange="document.getElementById('upload_visible').value=this.value">
<button type="button" onclick="document.getElementById('upload_hidden').click();" id="upload_visible">+</button>

<input  type="submit" name="registr" value="Ready" size=15 id="reg_cmpl" />


+

它可能会对您有所帮助。
只需更改按钮类型，然后按以下方式重试：-

<input type="file" name="file_up" id="upload_hidden" accept="image/*,image/jpeg" onchange="document.getElementById('upload_visible').value=this.value">
<button type="button" onclick="document.getElementById('upload_hidden').click();" id="upload_visible">+</button>

<input  type="submit" name="registr" value="Ready" size=15 id="reg_cmpl" />


+

它可能会对您有所帮助。
您可以使用
标签
自定义
输入类型=文件
的css。我发现这是更好的方法！您可以使用
label
自定义
input type=file
的css。我发现这是更好的方法！