当用户点击“打开”时，上传文件输入表单

Question

我想知道这种情况是否可行：

1. 点击“上传”按钮。它的风格与平常截然不同。它不显示“未选择文件”文本。

2. 通常的文件浏览器会弹出。用户选择要上载的文件。他们点击文件浏览器中的“打开”按钮。

3. 单击“打开”后，文件浏览器将关闭（正常情况下）并立即开始上传文件（与需要提交的正常文件不同）。

4. 我检测文件上传完成后，并指向另一页。

以下是我尝试实现它的方法：

1. 输入按钮上的自定义CSS - 这似乎并不难。
2. 无需更改
3. 检测输入值何时更改。一旦我检测到它已经改变，就触发提交。
4. ????如何检测文件何时完成上传？

Answer 1

如果您使用表单提交，则在（可能是POST）请求完成时文件已完成上传。

要在输入值更改时触发提交，请在JavaScript中使用form.submit()。

$('#file_input').change(function() {
    $(this).closest('form').submit();
});

您的服务器应将重定向作为回复发回（例如状态代码301,302,303等）。

Answer 2

取决于您如何实施它。但这就是我在其中一个项目中所做的。

第1步使用Ajax上传文件：

upload file using jquery ajax How to upload a file using jQuery.ajax and FormData Google

第2步在上传完成后，我的服务器端脚本会返回JSON - 取决于您正在使用的服务器端语言。

第3步我解析json以查看上传是否成功，然后采取必要步骤