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

How to upload a file using a simple jquery-ajax call

本文关键字：调用 文件 ajax jquery 何使用 简单      更新时间：2023-09-26

我正在搜索一个简单客户端脚本，以便使用ajax上传文件。在网上搜索这个脚本只会发现很多具有多种功能的插件。我不需要多功能-只需要能够使用ajax 尽可能简单地上传

有可能写一些简单的东西吗：

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

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

除此之外，为了获得阻力&drop for files-是否有一个简单的脚本，或者我需要使用插件（是否有一种没有多功能的非常小而简单的插件）

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

你的解决方案是伪造

创建表单元素

<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

一旦您完成了对文件的操作，您就可以根据需要生成一个echo，包括在此时刷新初始表单。

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

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

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

Uploadify是ajax上传的另一个很好的解决方案。其
  • 极易设置
  • 非常时尚
  • 交叉浏览

参见演示

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

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

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

希望能有所帮助。

相关文章：