Javascript ajax文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2751795/
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
Ajax file upload
提问by user306205
I want to upload a file using Ajax and php. I have a form with <input type="file">tag. I want when user browses a file and clicks on submit, the file to be uploaded without a refresh. How should I do this ? It does't matter if refresh occur but i want to upload file with help of ajax.
我想使用 Ajax 和 php 上传文件。我有一个带<input type="file">标签的表格。我希望当用户浏览文件并单击提交时，该文件无需刷新即可上传。我该怎么做？刷新是否发生无关紧要，但我想在 ajax 的帮助下上传文件。
回答by Manki
- Use a hidden iframe and set your form's target to that iframe's name. This way, when the form is submitted, only the iframe will be refreshed.
- Have an event handler registered for the iframe's load event to parse the response.
- 使用隐藏的 iframe 并将表单的目标设置为该 iframe 的名称。这样，当表单提交时，只会刷新 iframe。
- 为 iframe 的 load 事件注册一个事件处理程序来解析响应。
More details on my blog post: http://blog.manki.in/2011/08/ajax-fie-upload.html
关于我的博客文章的更多详细信息：http: //blog.manki.in/2011/08/ajax-fie-upload.html
回答by Nikita Rybak
I did it with this jquery plugin. It pretty much mimics standard jquery ajax functionality, but also allows you to send data using iframe. No flash involved, pure javascript.
我用这个 jquery 插件做到了。它几乎模仿了标准的 jquery ajax 功能，但也允许您使用 iframe 发送数据。不涉及 Flash，纯 javascript。
http://malsup.com/jquery/form/
http://malsup.com/jquery/form/
Here is a file upload example
http://malsup.com/jquery/form/#file-upload
回答by zamoldar
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere. check this: http://valums.com/ajax-upload/
该插件使用 XHR 在 FF3.6+、Safari4+、Chrome 中上传带有进度条的多个文件，并在其他浏览器中回退到基于隐藏 iframe 的上传，提供良好的用户体验。检查这个：http: //valums.com/ajax-upload/
