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

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 以查看上传是否成功，然后采取必要的步骤