Javascript HTML上传文件的小操作

当我在IE8上使用此代码时，文件通过HTTP请求发送：

<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>

键入一些文本（如果愿意）：



请指定一个文件

但是，当我添加另一个中间按钮“添加文件”时，正如您在下面看到的，文件不会发送到服务器端，而不是按“浏览”按钮本身，为什么

<form action="http:localhost:8080/myApp"
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Please specify a file<br>
<input id="fileChooser" type="file" name="datafile" size="40">
</p>
<button onclick="document.getElementById('fileChooser').click()">Add File</button>
<div>
<input type="submit" value="Send">
</div>
</form>

键入一些文本（如果愿意）：



请指定一个文件


添加文件

更改事件处理程序：

<button onclick="document.getElementById('fileChooser').click(); return false">Add File</button>

添加文件

您的按钮充当“选择”元素。我认为，您还可以通过显式设置按钮类型使其工作：

<button onclick="document.getElementById('fileChooser').click()" type='button'>Add File</button>

添加文件

---

现在，这在Chrome，也许是Safari中可以使用，你说现在它在IE8中可以使用，甚至可以启动文件选择器。但是，它在Firefox中不起作用，因为Firefox似乎对文件输入的处理更为严格。

好，请阅读一些文章。显然那是不可能的。

---

我希望HTML5和IE9能在许多方面改进恼人的上传按钮的定制。

通过将不透明度设置为0来隐藏类型文件的真实输入，然后将假按钮放在上面，并使用较小的

z-index

值。这样，当用户单击假按钮时，实际上会单击下面的真实按钮，您将获得所需的视觉效果。

我尝试过，但没有帮助。我也不明白这次更正的意义。我的问题是没有打开操作系统文件选择器。无论如何，它正在被打开。问题是，在我的第二个实现中，按submit键后，文件最终不会发送。@Spiderman如果它在IE8中工作，可能是因为IE8将按钮类型默认为“button”，而不是“submit”。但是，如果文件选择器正在选择文件，并且文件输入实际上已更新（您看到了文件名，对吗？），那么文件未被发布就毫无意义。我会为此做个测试。