我想像谷歌邮件一样上传文件。我想使用 jQuery 和 PHP 来完成它是否有获取进度条等？
在这里，我添加了一段关于谷歌如何做到这一点的视频。 http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf
请不要使用 flash，不要使用 perl 或 cgi..
我想我现在可以不用进度条了
【问题讨论】：
奇怪的是人们说gmail不使用flash，而你可以在gmail界面中清楚地看到swf文件。尝试右键单击“附加文件”。这就是允许一次多次上传的原因。
【讨论】：
最简单的方法是使用SWFUpload，它是一个用Flash 编写的小按钮，所有的钩子都可以用JS 驱动它。非常易于使用并且与 PHP 配合得很好
但是，如果您真的希望它是纯 JS，您将需要服务器的一些帮助。具体来说，您需要开始上传，并定期向服务器查询进展情况。不幸的是，PHP 上传处理直到下载完成后才会收到任何通知。你必须用别的东西代替它。正因为如此，有一些纯 JS 上传器包含示例 Perl 服务器代码。
IOW：JS 和 PHP 没有（完全）削减它。要么在客户端添加闪存，要么在服务器上添加更好的上传处理程序。
【讨论】：
在我看来，这是一篇关于这个主题的优秀文章： http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
不幸的是，缺乏对 IE 和 Opera 的支持，但希望这种情况会有所改变。
【讨论】：
Uploadify 是另一个使用 jquery 的 swf（对不起）上传按钮。与哈维尔提到的想法相同。
【讨论】：
PHP 不支持直接报告上传进度。所以没有办法读回上传状态。但是，有一个patch 可能会起作用。不过我没试过。
【讨论】：
GMail 使用 Flash 在后台上传文件。 SWFUpload 是一个开源项目，它反对类似的东西。
【讨论】：
...gmail 使用具有 display:hidden 样式的 iFrame；然后当您在表单上上传时，它会将 iFrame 发送到上传网址。根本不涉及闪光。 Google 在 Gmail 上使用 flash 所做的唯一事情就是为聊天发出声音。你必须在设置中允许它。他们并没有真正过多地使用闪存，只是因为它在内存和 cpu 使用方面非常糟糕。 Javascript 可以做任何 flash 可以做的事情（尽管在某些情况下需要更多的代码），但 99% 的情况下，Javascript 速度更快，并且在内存方面更好。
【讨论】：
也许您可以使用 PlUpload。它支持很多类型并且是高度可定制的。您可以查看网站上的演示。在主页上它还显示它在主页上支持的内容并具有回退机制。
编辑：它可以作为一个 jQuery 插件使用。
【讨论】：
SWFUpload 是 gud 并且兼容所有类型的 Web 应用程序
【讨论】：
关于表单提交时Ajax不支持二进制数据..有一个解决方法；如果你是 jQuery，那么你可以在 http://www.malsup.com/jquery/form/ 使用这个表单插件（来自 malsup）。我已经用了很多年了……
plupload 看起来很有希望.. 对此竖起大拇指 ;) 我必须说它有点笨重！！！
【讨论】：
在 2018 年，使用纯 JavaScript 的网站可以上传文件，就像 Google Mail 为邮件附件所做的那样。单击即可调出 Web 浏览器的文件浏览器对话框。开始上传不需要单独的提交按钮。诀窍是使用隐藏的 HTML <input type="file"> 元素。
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 代码：
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
echo $_FILES['myFile']['name'];
exit;
}
?>
这适用于 Internet Explorer 11、Edge、Firefox、Chrome、Opera。 这个例子来源于https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
【讨论】：