javascript 如何使用简单的 jquery-ajax 调用上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9479004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload a file using a simple jquery-ajax call
提问by Alon
I am searching for a simpleclient-side script to upload a file using ajax. Searching for the web for this script only brought up a lot of plugins with multi-features. I don't need multi-feautres - just to be able to upload it as simple as possible using ajax
我正在寻找一个简单的客户端脚本来使用 ajax 上传文件。在网上搜索这个脚本只会带来很多具有多功能的插件。我不需要 multi-feautres - 只是为了能够使用 ajax 尽可能简单地上传它
Is it possible to write something simple as:
是否可以写一些简单的东西：
$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) {
$('.result').html(data);
});
If it is possible - how should I write it right ($('#uploadInput').val()won't give me the right directory path - so what do I need to do to pass the location using Ajax).
如果可能 - 我应该如何正确编写它（$('#uploadInput').val()不会给我正确的目录路径 - 那么我需要做什么才能使用 Ajax 传递位置）。
aside from that - in order to get drag&drop for files - Is there a simple script for that or do I need to use plugin (and is there a really tiny and simple one without multi-features)
除此之外 - 为了获得文件的拖放 - 是否有一个简单的脚本或者我是否需要使用插件（并且是否有一个非常小而简单的没有多功能的插件）
回答by Ohgodwhy
You can't use AJAX to upload files (unless the clients browsers supports the HTML 5 element, which allows access to the file object.).
您不能使用 AJAX 上传文件（除非客户端浏览器支持 HTML 5 元素，该元素允许访问文件对象。）。
Your solution is to fake it
你的解决办法是伪造它
create a form element
创建表单元素
<form id="myForm" action="upload.php" method="POST" target="results_frame">
<input name="fileUpload" type="file" />
<input type="submit" value="Submit" />
</form>
We set the target of the frame for 'results_frame', we'll define it after the form in the HTML as an empty iframe.
我们为“results_frame”设置了框架的目标，我们将在 HTML 中的表单之后将其定义为一个空的 iframe。
<iframe id="results_frame" name="results_frame" style="display:none;"></iframe>
Then, in the backend in your php file you can capture the file as -
然后，在您的 php 文件的后端，您可以将文件捕获为 -
$_FILE['file']['param']; //where param accepts multiple values
//such as name, type, size, error, and tmp_name
Once you've done your manipulating with the file, you can make an echo whatever information you want, including refreshing the initial form at this point.
完成对文件的操作后，您可以回显您想要的任何信息，包括此时刷新初始表单。
回答by Darin Dimitrov
You could achieve this using some HTML5 features such as the File API(take a look at the Example: Uploading a user-selected filesection in this article).
您可以使用一些 HTML5 功能（例如文件 API）来实现此目的（请查看本文中的示例：上传用户选择的文件部分）。
But if you want cross browser solution I would recommend you using a client side upload plugin. For example the jQuery formplugin is quite easy to setup. Valums Ajax uploadis also very nice. It provides many functionalities such as drag and drop and upload progress but if you don't care about them, they can be easily turned off.
但是如果您想要跨浏览器解决方案，我建议您使用客户端上传插件。例如，jQuery 表单插件很容易设置。Valums Ajax 上传也很不错。它提供了许多功能，例如拖放和上传进度，但如果您不关心它们，它们可以轻松关闭。
回答by devnull69
On modern browsers you can use the new xhr2 (see http://www.html5rocks.com/en/tutorials/file/xhr2/) to perform a neat AJAX file upload ... including progress bar. I don't really know if this has already been embedded into the latest jQuery. Maybe someone else can shed some light on that.
在现代浏览器上，您可以使用新的 xhr2（参见http://www.html5rocks.com/en/tutorials/file/xhr2/）来执行简洁的 AJAX 文件上传……包括进度条。我真的不知道这是否已经嵌入到最新的 jQuery 中。也许其他人可以对此有所了解。
回答by Starx
回答by OptimusCrime
If you want to make a ajax uploader that works in all moderns browsers, you should check out some jQuery plugins. Check out this article for example: http://www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/.
如果你想制作一个适用于所有现代浏览器的 ajax 上传器，你应该查看一些 jQuery 插件。例如查看这篇文章：http: //www.tutorialchip.com/jquery/9-powerful-jquery-file-upload-plugins/。
What you suggested in your first post will not work. Even if you grab the content from the form, you can't put the information in GET. URLs can maximum be 2000 (?) characters long, so uploading a bigger file will cause the upload to crash. You need to send this using POST.
您在第一篇文章中建议的内容将不起作用。即使从表单中抓取内容，也无法将信息放入 GET 中。URL 的最大长度为 2000 (?) 个字符，因此上传更大的文件会导致上传崩溃。您需要使用 POST 发送此信息。
Btw, I've had some good experience with this plugin: http://valums.com/ajax-upload/. It is pretty simple, so you can customize it like you want (with some basic jQuery/js experience).
顺便说一句，我对这个插件有一些很好的经验：http: //valums.com/ajax-upload/。它非常简单，因此您可以根据需要对其进行自定义（具有一些基本的 jQuery/js 经验）。
Hope it helps.
希望能帮助到你。
