Question

我想像google mail一样上传文件。我想使用jQuery和PHP来实现它，无论如何获得进度条等。

在这里，我添加了一个谷歌如何做到这一点的视频。 http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf

没有闪光，没有perl或cgi请...

我想我现在可以在没有进度条的情况下生活我实际上正在搜索有关jquery插件的信息或者我需要查看的内容

Answer 1

当你可以在gmail界面中清楚地看到swf文件时，人们说gmail不使用flash是很奇怪的。尝试右键单击“附加文件”。它允许一次多次上传。

Answer 2

最简单的方法是使用SWFUpload，这是一个用Flash编写的小按钮，所有钩子都用JS来驱动它。非常好用，适用于PHP

但是，如果你真的希望它是纯JS，你需要服务器的一些帮助。具体来说，您需要开始上传，并定期向服务器查询它的运行方式。遗憾的是，PHP上传处理在下载完成之前不会收到任何通知。你必须用其他东西替换它。有一些纯粹的JS上传器，其中包含了Perl服务器代码示例。

IOW：JS和PHP没有（完全）削减它。或者向客户端添加闪存，或者在服务器上添加更好的上传处理程序。

Answer 3

在我看来是一篇关于这个主题的优秀文章： http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

不幸的是IE和Opera缺乏支持，但希望这会改变。

Answer 4

Uploadify是另一个使用jquery的swf（抱歉）上传按钮。和哈维尔所说的一样。

Answer 5

PHP不支持直接报告上传进度。因此无法回读上传状态。但是，有patch可能有效。我没试过。

Answer 6

GMail使用Flash在后台上传文件。 SWFUpload是一个开源项目，可以解决类似问题。

Answer 7

... gmail使用具有样式显示的iFrame：hidden;然后当您在表单上传时，它会将iFrame发送到上传网址。根本没有涉及闪光灯。 Google在Gmail上使用Flash的唯一方法就是为聊天提供噪音。你必须在设置中允许它。它们实际上并没有真正使用闪存，只是因为它在内存和CPU使用方面非常糟糕。 Javascript可以做闪光灯可以做的任何事情（在某些情况下可以使用更多的代码）但Javascript，99％的情况下更快，内存更好。

Answer 8

也许你可以使用PlUpload。它支持很多类型，并且可以高度自定义。您可以在网站上查看演示。在主页上，它还显示了它在主页上支持的内容，并具有回退机制。

http://www.plupload.com/

编辑：它可以作为jQuery插件使用。

Answer 9

SWFUpload是gud并且与所有类型的Web应用程序兼容

Answer 10

关于Ajax在表单提交时不支持二进制数据..有一种解决方法;如果你是jQuery，那么你可以在http://www.malsup.com/jquery/form/使用这个Form Plugin（来自malsup）。我已经使用它多年......

此外，plupload看起来很有希望......赞成这一点;）我必须说它有点笨重!!!

Answer 11

在2018年，使用纯JavaScript的网站可以像Google Mail一样上传文件作为邮件附件。只需单击一下即可打开Web浏览器的文件浏览器对话框。无需单独的Submit按钮即可开始上传。诀窍是使用隐藏的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

有关进度条，请参见How to get progress from XMLHttpRequest

Gmail喜欢使用jQuery上传文件

11 个答案: