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

问题描述：

我在寻找简单的客户端脚本来使用ajax上传文件。在这个脚本中搜索网站只会带来很多带有多功能的插件。我不需要多的feautres - 只是为了能够把它上传尽可能使用AJAX如何使用简单的jQuery-ajax调用来上传文件

是否可以写一些简单简单：

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

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

从

一边 - 为了得到拖&下降的文件 - 是否有一个简单的脚本或我需要使用插件（并且是有一个非常微小和简单的一个无多的功能）

“简单”，“阿贾克斯”和“上传”这两个词并不是我害怕的词语。没有快速的方法来做到这一点。 – BenOfTheNorth 2012-02-28 09:10:32

答

您可以使用一些HTML5功能来实现此功能，例如File API（请参阅示例：上载本文中的用户选定文件部分）。

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

我不明白为什么它不能简单。我可以使用一个PHP文件来做到这一点。所以为什么我不能用同一个php文件来做，而是用一个ajax调用来发送它的参数？ – Alon 2012-02-28 09:13:40

@Alon，因为要将文件上传到服务器，您需要能够访问其内容。由于很明显的原因，您无法使用JavaScript访问客户端计算机上的文件内容。实际上，HTML5 File API允许您假设用户已经在文件输入中选择了一个文件。此外，我没有看到使用专为此任务设计的插件的任何复杂内容。 – 2012-02-28 09:14:34

答

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

答

您不能使用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

一旦你已经做了该文件的操纵，你可以让你想要的任何信息的回声包括在这一点上刷新最初的表格。

iFrames来解决这个问题。不，不是。 – OptimusCrime 2012-02-28 09:29:00

看到我的答案，我认为这很清楚我的意思是正确的。你的答案是否包含ajax？或者我错过了什么。 – OptimusCrime 2012-02-28 09:36:40

我一直在使用这个很长时间，再次告诉我，这不是纯ajax/jQuery：http://valums.com/ajax-upload/ – OptimusCrime 2012-02-28 09:45:08

答

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

非常容易安装，
非常时尚，而且
交叉broswer。

见demos

下载按钮导致PayPal捐赠程序？ “好”！ – 2013-07-05 13:33:26

@AleksandrMakov，哦它曾经是一个免费的产品。仅仅因为你必须为此付费，并不能证明我的观点。他们是努力工作的开发人员，而不是像你这样的freeloader，他们现在应该得到一些捐助。它已经有这么多年了。请向开发商 – Starx 2013-07-05 15:35:38

嗯，我在哪里“反驳”你的观点？嘿，Starx，这是你的啤酒！哦，现在当你拿着那个冷瓶 - 请付钱，我应得的。 – 2013-07-05 19:23:36

答

如果你想使一个AJAX上传，在所有现代人浏览器上运行，你应该检查出一些jQuery插件。看看这篇文章，例如：http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/。

您在第一篇文章中建议的内容不起作用。即使您从表单中获取内容，也无法将信息放入GET中。 URL最长可以有2000（？）个字符，因此上传更大的文件会导致上传崩溃。你需要使用POST发送。

顺便说一句，我对这个插件有一些很好的体验：http://valums.com/ajax-upload/。这非常简单，所以你可以像你想要的那样定制它（带有一些基本的jQuery/js体验）。

希望它有帮助。

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

相关推荐