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

Posted 2023-03-05

【中文标题】当用户单击“打开”时上传文件输入表单

【英文标题】：Have a file input form upload when a user clicks "open"

【发布时间】：2013-11-10 14:45:30

【问题描述】：

我想知道这个流程是否可行：

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

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

点击“打开”后，文件浏览器将关闭（正常），文件立即开始上传（与正常需要提交不同）。

我检测到文件何时完成上传，并定向到另一个页面。

这是我将如何尝试实现它：

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

【问题讨论】：

使用常规表单提交执行第 3 和第 4 项。操作页面应该进行重定向。

【参考方案1】：

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

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

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

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

【参考方案2】：

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

步骤 1 使用 Ajax 上传文件：

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

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

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