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 video of how google does it. http://dl.getdropbox.com/u/5910/Jing/2009-04-02_1948.swf
No flash, no perl or cgi please..
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
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.
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
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.
IOW: JS and PHP don't (fully) cut it. either add flash to the client, or a better upload handler at the server.
in my opinion an excellent article on this topic: http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html
unfortunately support is lacking for IE and Opera, but hopefully this will change.
Uploadify is another swf (sorry) upload button that uses jquery. Same idea as what Javier mentioned.
PHP doesn't support reporting of upload progress directly. So there is no way of reading the upload status back. However, there is a patch that might work. I haven't tried though.
GMail uses Flash to upload the file in the background. SWFUpload is an open source project that foes something similar.
...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.
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.
Edit: It is available as a jQuery plugin.
SWFUpload is gud and compatible with all type of web applications
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!!!
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
