php 使用 jQuery 像 Gmail 一样上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/710852/
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
Gmail like file upload with jQuery
提问by Thomaschaaf
I would like to upload files just like google mail does. I would want to use jQuery and PHP to do it is there anyway of getting the progressbar etc.?
我想像谷歌邮件一样上传文件。我想使用 jQuery 和 PHP 来做它无论如何获取进度条等？
Here I added a video of how google does it. http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf
在这里，我添加了一个关于谷歌如何做的视频。http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf
No flash, no perl or cgi please..
请不要闪光灯，不要使用 perl 或 cgi..
I guess I can live without the progressbar now I am actually searching for information about jquery plugins or just what things I would need to look at
我想我现在可以没有进度条了
采纳答案by Jake
It is weird that people say that gmail doesn't use flash, when you can plainly see the swf file in the gmail interface. Try right clicking on "Attach a file". It is what allows the multiple uploads at once among other things.
奇怪的是，当您可以在 gmail 界面中清楚地看到 swf 文件时，人们说 gmail 不使用 flash。尝试右键单击“附加文件”。它允许同时进行多次上传。
回答by Javier
The easiest would be to use SWFUpload, it's a small button written in Flash, with all the hooks to drive it in JS. Very easy to use and works well with PHP
最简单的方法是使用SWFUpload，它是一个用 Flash 编写的小按钮，带有在 JS 中驱动它的所有钩子。非常易于使用并且与 PHP 配合良好
but, if you really want it to be pure JS, you'll need some help from the server. specifically, you'll need to start the upload, and periodically query the server about how's it going. unfortunately, PHP upload handling doesn't get any notification until after the download finishes. you'd have to replace it with something else. there are a few pure JS uploaders that include sample Perl server code just because of that.
但是，如果您真的希望它是纯 JS，则需要服务器的一些帮助。具体来说，您需要开始上传，并定期向服务器查询进展情况。不幸的是，PHP 上传处理在下载完成之前不会收到任何通知。你必须用别的东西代替它。正因为如此，有一些纯 JS 上传器包含示例 Perl 服务器代码。
IOW: JS and PHP don't (fully) cut it. either add flash to the client, or a better upload handler at the server.
IOW：JS 和 PHP 没有（完全）削减它。要么向客户端添加闪存，要么在服务器上添加更好的上传处理程序。
回答by Philip Jespersen
in my opinion an excellent article on this topic: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
在我看来，关于这个主题的一篇很棒的文章：http: //robertnyman.com/html5/fileapi-upload/fileapi-upload.html
unfortunately support is lacking for IE and Opera, but hopefully this will change.
不幸的是，IE 和 Opera 缺乏支持，但希望这会改变。
回答by NetHawk
回答by Aaron Qian
回答by Julien
回答by B Squared
...gmail uses an iFrame that has style display:hidden; then when you upload on the form, it then sends the iFrame to the upload url. There is no flash involved at all. The only thing Google does with flash on Gmail is just making noises for chats. And you have to allow that in settings. They don't really use flash too much just because it is pretty bad as far as memory and cpu usage. Javascript can do anything flash can do (albiet with a lot more code in some cases) but Javascript, in 99% of cases is much faster, and better memory-wise.
...gmail 使用具有样式 display:hidden; 的 iFrame 然后当您在表单上上传时，它会将 iFrame 发送到上传 url。根本不涉及闪光灯。Google 对 Gmail 上的 Flash 所做的唯一一件事就是在聊天时发出噪音。你必须在设置中允许它。他们并没有真正过多地使用闪存，因为就内存和 CPU 使用而言，它非常糟糕。Javascript 可以做 Flash 可以做的任何事情（尽管在某些情况下有更多的代码）但是 Javascript，在 99% 的情况下更快，并且在内存方面更好。
回答by Rolf Babijn
Maybe you could use PlUpload. It has support for a lot of types and is highly customizable. You can check out the demos on the website. On the homepage it also shows what it supports on the homepage and has a fallback mechanism.
也许你可以使用 PlUpload。它支持多种类型并且高度可定制。您可以在网站上查看演示。在主页上，它还显示了它在主页上支持的内容并具有回退机制。
Edit: It is available as a jQuery plugin.
编辑：它可用作 jQuery 插件。
回答by Mrigesh Raj Shrestha
About Ajax not supporting binary data while form submission.. there is a workaround; if you are jQuery then you can use this Form Plugin (from malsup) here at http://www.malsup.com/jquery/form/. I have been using it for years...
关于表单提交时 Ajax 不支持二进制数据.. 有一个解决方法; 如果您是 jQuery，那么您可以在http://www.malsup.com/jquery/form/ 上使用此表单插件（来自 malsup）。我已经使用它多年了...
Also plupload seems promising.. thumbs up for that ;) i must say its a bit bulky!!!
另外 plupload 似乎很有前途.. 对此表示赞同 ;) 我必须说它有点笨重！！！
回答by Brent Pfister
In 2018, a website using plain JavaScript can upload files like Google Mail does for mail attachments. A single click can bring up the web browser's file explorer dialog. A separate Submit button is not needed to start the upload. The trick is to use a hidden HTML <input type="file">element.
2018 年，使用纯 JavaScript 的网站可以像 Google Mail 那样上传用于邮件附件的文件。单击即可打开 Web 浏览器的文件资源管理器对话框。不需要单独的提交按钮来开始上传。诀窍是使用隐藏的 HTML<input type="file">元素。
Example HTML and JavaScript:
示例 HTML 和 JavaScript：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<!-- Demo a button to upload files from a local computer to a web server. -->
</head>
<body>
<input type="file" id="inputFileElement" multiple style="display:none">
<button id="fileSelectButton">Select some files</button>
<script>
const fileSelectButton = document.getElementById("fileSelectButton");
const inputFileElement = document.getElementById("inputFileElement");
// When the user presses the upload button, simulate a click on the
// hidden <input type="file"> element so the web browser will show its
// file selection dialog.
fileSelectButton.addEventListener("click", function (e) {
if (inputFileElement) {
inputFileElement.click();
}
}, false);
// When the user selects one or more files on the local host,
// upload each file to the web server.
inputFileElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = inputFileElement.files;
const numFiles = fileList.length;
for (let i = 0; i < numFiles; i++) {
const file = fileList[i];
console.log("Starting to upload " + file.name);
sendFile(file);
}
}
// Asynchronously read and upload a file.
function sendFile(file) {
const uri ="serverUpload.php";
const xhr = new XMLHttpRequest();
const fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("Finished uploading: " + xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
</script>
</body>
</html>
PHP code:
PHP代码：
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
echo $_FILES['myFile']['name'];
exit;
}
?>
This works on Internet Explorer 11, Edge, Firefox, Chrome, Opera. This example was derived from https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
这适用于 Internet Explorer 11、Edge、Firefox、Chrome、Opera。此示例源自https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
For a progress bar, see How to get progress from XMLHttpRequest
有关进度条，请参阅如何从 XMLHttpRequest 获取进度
