Gmail like file upload with jQuery

后端未结

关注

 11  1053

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.?

Here I added a

相关标签:

11条回答

终归单人心

2020-12-02 09:11

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...

Also plupload seems promising.. thumbs up for that ;) i must say its a bit bulky!!!

0 讨论(0)
发布评论:

提交评论
- 加载中...
-上瘾入骨i

2020-12-02 09:12

SWFUpload is gud and compatible with all type of web applications

0 讨论(0)
发布评论:

提交评论
- 加载中...
余生分开走

2020-12-02 09:13

...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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
一生所求

2020-12-02 09:17

GMail uses Flash to upload the file in the background. SWFUpload is an open source project that foes something similar.

0 讨论(0)
发布评论:

提交评论
- 加载中...

我在风中等你

2020-12-02 09:21

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.

Example HTML and 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
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

For a progress bar, see How to get progress from XMLHttpRequest

0 讨论(0)

上一页 1 2