如何使用简单的 jquery-ajax 调用上传文件

Posted 2023-02-24

【中文标题】如何使用简单的 jquery-ajax 调用上传文件

【英文标题】：How to upload a file using a simple jquery-ajax call

【发布时间】：2012-03-17 18:02:08

【问题描述】：

我正在寻找一个 simple 客户端脚本来使用 ajax 上传文件。 在网上搜索这个脚本只发现了很多具有多种功能的插件。我不需要多功能 - 只是为了能够使用 ajax 尽可能简单地上传它

是否可以写一些简单的东西：

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) 
   $('.result').html(data);    
 );

如果可能的话 - 我应该如何正确地编写它（$('#uploadInput').val() 不会给我正确的目录路径 - 所以我需要做些什么来使用 Ajax 传递位置）。

除此之外 - 为了获得文件的拖放 - 是否有一个简单的脚本或者我需要使用插件（是否有一个非常小而简单但没有多功能的插件）

【问题讨论】：

恐怕'simple'、'ajax'和'upload'这三个词不能很好地结合在一起。没有快速的方法。

【参考方案1】：

您不能使用 AJAX 上传文件（除非客户端浏览器支持 HTML 5 元素，它允许访问文件对象。）。

你的解决办法是伪造它

创建一个表单元素

<form id="myForm" action="upload.php" method="POST" target="results_frame">
  <input name="fileUpload" type="file" />
  <input type="submit" value="Submit" />
</form>

我们为“results_frame”设置框架的目标，我们将在 HTML 中的表单之后将其定义为空 iframe。

<iframe id="results_frame" name="results_frame" style="display:none;"></iframe>

然后，在您的 php 文件的后端，您可以将文件捕获为 -

$_FILE['file']['param']; //where param accepts multiple values
//such as name, type, size, error, and tmp_name

完成对文件的操作后，您可以回显任何您想要的信息，包括此时刷新初始表单。

【讨论】：

看我的回答，我想我的意思很清楚是正确的。你的答案，它是否包含ajax？还是我错过了什么。

我已经使用这个很久了，再次告诉我这不是纯 ajax/jQuery：valums.com/ajax-upload

【参考方案2】：

您可以使用一些 HTML5 功能来实现这一点，例如 File API（请查看本文中的示例：上传用户选择的文件部分）。

但如果您想要跨浏览器解决方案，我建议您使用客户端上传插件。例如jQuery form 插件很容易设置。 Valums Ajax upload 也很不错。它提供了许多功能，例如拖放和上传进度，但如果您不关心它们，可以轻松关闭它们。

【讨论】：

我不明白为什么不能简单。我可以使用 php 文件来完成。那么为什么我不能使用相同的 php 文件但使用向其发送参数的 ajax 调用呢？

@Alon，因为要将文件上传到服务器，您需要能够访问其内容。并且由于非常明显的原因，您无法使用 javascript 访问客户端计算机上的文件内容。实际上，HTML5 File API 允许您这样做，假设用户已经在文件输入中选择了一个文件。此外，我认为使用专为此任务设计的插件并不复杂。

【参考方案3】：

在现代浏览器上，您可以使用新的 xhr2（请参阅 http://www.html5rocks.com/en/tutorials/file/xhr2/）执行简洁的 AJAX 文件上传...包括进度条。我真的不知道这是否已经嵌入到最新的 jQuery 中。也许其他人可以对此有所了解。

【参考方案4】：

Uploadify 是另一个很好的 ajax 上传解决方案。它的

非常容易设置， 非常时尚，而且

跨浏览器

。

见demos

【讨论】：

下载按钮导致Paypal捐赠程序？ “不错”！

@AleksandrMakov，哦，它曾经是免费产品。仅仅因为您必须为此付费，并不能反驳我的回答。他们是努力工作的开发人员，而不是像你这样的白手起家，他们现在应该得到一些捐赠。它已经免费了这么多年了。尊重开发者

嗯，我在哪里“反驳”了你的观点？嘿，Starx，这是你的啤酒！哦，现在当你拿着那个冰冷的瓶子时——请付钱，这是我应得的。

【参考方案5】：

如果您想制作一个适用于所有现代浏览器的 ajax 上传器，您应该查看一些 jQuery 插件。例如查看这篇文章：http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/。

您在第一篇文章中的建议将不起作用。即使从表单中抓取内容，也无法将信息放入 GET 中。 URL 的最大长度为 2000 (?) 个字符，因此上传较大的文件会导致上传崩溃。您需要使用 POST 发送此信息。

顺便说一句，我对这个插件有一些很好的经验：http://valums.com/ajax-upload/。它非常简单，因此您可以根据需要自定义它（具有一些基本的 jQuery/js 经验）。

希望对你有帮助。