Gmail Like File Upload with Jquery

Gmail like file upload with jQuery

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.

I want an AJAX file uploader like Gmail file upload with the progress bar in PHP

you can use this plugins :

http://aquantum-demo.appspot.com/file-upload

http://valums.com/files/2010/file-uploader/demo.htm

http://www.uploadify.com/demos/

How to create file upload like gmail?

Try this code....

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
  var nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
    nBytes += oFiles[nFileId].size;
  }
  var sOutput = nBytes + " bytes";
  // optional code for multiples approximation
  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>

<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Done"></p>
</form>
</body>
</html>

How to implement gmail like file upload/attachment using HTML 5

I could be wrong, but I think the only help that HTML5 gives for such an upload-pattern is that it supports the attribute 'multiple' for upload fields.
This allows you to select multiple files from the file-chooser dialog without using flash
.
The uploading itself still has to be done by JS or PHP or [yourfavorite]. A nice helper could be

http://code.google.com/p/jquery-html5-upload/

for example.

Gmail Style File Upload with AJAX

The second event is a click event, it just contains all about the click, it will NOT contain anything about files which is contained in the first event.

So what you probably should do is: create a shared variable, in the 1st event set it, and in the second event read it. like the below code shows:

var filesInQueue = []; // shared variable
dropArea.addEventListener("drop", function (evt) {
    traverseFiles(evt.dataTransfer.files);
    filesInQueue = filesInQueue.concat(Array.from(evt.dataTransfer.files)); // set to the shared variable
    this.className = "";
    evt.preventDefault();
    evt.stopPropagation();
}, false);

    $('#btnUploadAll').click(function (evt) {

        for (x in filesInQueue) { // read from shared variable

            var file = filesToUpload[x];

            //do the upload script to server.
            //xxxxxxxxxxxxxxxxxxxx
        }
    });

Gmail Like File Upload with Jquery