在 JQuery 中通过 AJAX 上传文件

Posted 2023-02-24

【中文标题】在 JQuery 中通过 AJAX 上传文件

【英文标题】：File Upload via AJAX within JQuery

【发布时间】：2010-12-13 18:05:13

【问题描述】：

我是 JQuery AJAX 的新手。我想使用 jquery 实现文件上传。 是否可以使用 JQuery、AJAX 进行文件上传并将其发送到可以使用 apache 文件公共资源上传文件的 Servlet。谁能告诉我如何进一步进行？

谢谢， 深度。

【参考方案1】：

传统意义上的Ajax是XMLHttpRequest，它不允许你对本地文件进行编码和发送到服务器。

通过“ajax”进行上传的常用方法是使用 Flash swf 来处理同一页面上的上传，或者使用目标为不可见的 1x1 iframe 的表单强>。您有一些 Javascript 显示上传微调器或其他任何内容。文件上传后，让服务器返回一些 Javascript 给 iframe 之类的

<script type="text/javascript">
top.MyProject.doneUploading();
</script>

top 将允许您在常规页面中调用 Javascript。但是，为了使其正常工作，您必须确保 iframe 已提交到顶部文档所在的同一域。

【讨论】：

这就是为什么您通常看不到注册信息中包含的图片的原因。如姓名、电子邮件等。

@seanmonstar 为什么传统意义上的 Ajax 不允许您对本地文件进行编码并将其发送到服务器。如果您可以将各种其他参数发送到服务器，为什么不能为文件输入执行此操作？

【参考方案2】：

我在使用 Uploadify 时遇到了几个问题，所以我求助于 ajax upload

【讨论】：

链接现已损坏，需要更新。惭愧：（

【参考方案3】：

试试Uploadify

【讨论】：

是的 +1，我用它很好......就是这样。

Uplodify 需要 Flash，这可能不适合某些网站。

我们将 Uploadify 和付费的 html 5 版本 (uploadifive) 封装在一个 jQuery 扩展后面，以便它可以根据浏览器功能在它们之间进行选择。它可以工作，但由于两个 API 和模板略有不同，所以并没有什么好玩的。

【参考方案4】：

这不是 jQuery 解决方案，但请查看 http://www.swfupload.org。我过去曾使用该组件来提供类似 ajax / flickr 的上传界面。效果很好，并且很容易集成到您的网站中。 http://demo.swfupload.org 也有大量的演示。

【参考方案5】：

我认为 jQuery Fileuploader Plugin 是最好的。现在支持进行拖放和多个文件选择的 Html5 api。它独立于平台且非常易于安装。

http://pixelcone.com/fileuploader/

【讨论】：

这将是一个不错的选择...如果它有适当的 lincensing 信息。没有那个，我不会推荐它。 @John-Laniba，请善待并用它更新您的项目。

如果它易于设置，我会很乐意使用它......只是它的过程很烦人。