Question

我正在搜索简单客户端脚本，以使用ajax上传文件。搜索此脚本的Web只会带来很多具有多功能的插件。我不需要多功能 - 只是为了能够使用ajax

尽可能简单地上传它

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

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

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

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

Answer 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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

非常容易设置，
非常时尚，
交叉broswer 。

请参阅demos

Answer 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经验）。

希望它有所帮助。

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

5 个答案: