With XMLHttpRequest Level 2 it is possible to upload an HTML form with an XMLHttpRequest using it's "POST" method and the new FormData object.
The transmitted data is in the same format that the form's submit() function would use if the form's enctype was set to "multipart/form-data"
and is therefore accessable with the $_FILES global array in PHP.
Your browser does not support XMLHttpRequest Level 2
The following code samples illustrate how to upload an HTML form and get a live status report showing the current number of bytes transferred (for all form objects) while the upload is in progress.
HTML
PHP
Method [2]. File Upload (no HTML form required!)
It is also possible to upload a single file from an input element of type "file" <input type='file' /> but it is IMPORTANT TO NOTE that the object
will be sent as raw data, which is not accessable using the conventional $_FILES1 global in PHP.
The solution is to store the data to a binary safe string using file_get_contents("php://input") and then write it to an empty file with the fwrite() function.
The following code samples illustrate how to upload a single file and get a live status report showing the current number of bytes transferred while the upload is in progress.
1The $_FILES global array contains every file object sent over with an HTML form. Because we are not using an HTML form to send the data, the array will be empty.
HTML
PHP
Method [3]. Multi-File Upload (no HTML form required!)
Unlike an HTML form, which submits all files together (in an array object), you could use multiple XMLHttpRequest objects to send each file independently and at the same time.
Then, by adding event listeners for eachXMLHttpRequest object, you could monitor the upload progress for each file seperately, and for all files at the same time!
This is a significant improvement on submitting data with a form!
Another benefit of using multiple XMLHttpRequest objects is the ability to receive file-specific feedback. For example, say you wanted to upload the following files simultaneously:
Obezmotik_Photo.jpg (1.4MB)
Wildlife_Documentary.mp4 (175MB)
If you submitted them with an HTML form, you would have to wait until both files had uploaded, before handling them with your server-side script.
But by using a different XMLHttpRequest() for each upload, each file can be handled by your server-side script as soon as it's data has been sent!
So for example, you would get confirmation (via XMLHttpRequest.responseText) of Obezmotik_Foto.jpg's successful upload immediately after it completed.
(With an HTML form, you have to wait until all files have uploaded before any response can be sent back from your server-side script).
The following code samples illustrate how to upload multiple files and get a live status report showing the current number of bytes transferred while the uploads are in progress.
With XMLHttpRequest Level 2 it is possible to upload an HTML form with an XMLHttpRequest using it's "POST" method and the new FormData object. The transmitted data is in the same format that the form's submit() function would use if the form's enctype was set to "multipart/form-data" and is therefore accessable with the $_FILES global array in PHP.
The following code samples illustrate how to upload an HTML form and get a live status report showing the current number of bytes transferred (for all form objects) while the upload is in progress.
It is also possible to upload a single file from an input element of type "file" <input type='file' /> but it is IMPORTANT TO NOTE that the object will be sent as raw data, which is not accessable using the conventional $_FILES1 global in PHP.
The solution is to store the data to a binary safe string using file_get_contents("php://input") and then write it to an empty file with the fwrite() function.
The following code samples illustrate how to upload a single file and get a live status report showing the current number of bytes transferred while the upload is in progress.
Unlike an HTML form, which submits all files together (in an array object), you could use multiple XMLHttpRequest objects to send each file independently and at the same time. Then, by adding event listeners for each XMLHttpRequest object, you could monitor the upload progress for each file seperately, and for all files at the same time! This is a significant improvement on submitting data with a form!
Another benefit of using multiple XMLHttpRequest objects is the ability to receive file-specific feedback. For example, say you wanted to upload the following files simultaneously:
If you submitted them with an HTML form, you would have to wait until both files had uploaded, before handling them with your server-side script.
But by using a different XMLHttpRequest() for each upload, each file can be handled by your server-side script as soon as it's data has been sent! So for example, you would get confirmation (via XMLHttpRequest.responseText) of Obezmotik_Foto.jpg's successful upload immediately after it completed.
(With an HTML form, you have to wait until all files have uploaded before any response can be sent back from your server-side script).
The following code samples illustrate how to upload multiple files and get a live status report showing the current number of bytes transferred while the uploads are in progress.