JavaScript - how to upload file with jQuery?

9 points
Created by:

In JavaScript it is possible to upload file with jQuery in following way.

1. jQuery file upload example

ajax.htm file:

<!doctype html>
<html lang="en">
    <script src=""></script>
  <form id="form" method="POST" onsubmit="sendForm(); return false;">
    <input type="file" id="file" />
    <input type="submit" value="Upload" />
  <pre id="progress"></pre>

	var file = document.getElementById('file');
	var progress = document.getElementById('progress');

	function sendForm() {
		var data = new FormData();

		var files = file.files;
		for (var i = 0; i < files.length; ++i) {
			data.append('file', files[i]);

			type: 'POST',
			url: '/backend.php',
			data: data,
			contentType: false,
			processData: false,
			xhr: function () {
				var xhr = $.ajaxSettings.xhr();
				if (xhr.upload) {
					xhr.upload.onprogress = function(e) {
						var tmp = Math.round(100.0 * (e.loaded /;
						progress.innerText = 'Uploaded ' + tmp + '%';
				return xhr;
			success: function (data) {
				file.value = '';
				progress.innerText = data;
			error: function(error) {
				progress.innerText = 'Error: ' + error.status;


backend.php file:


	define('DST_DIR', 'C:\\wamp64\\www\\uploaded_files\\');

			$file = $_FILES['file'];
			$src_path = $file['tmp_name'];
			$dst_path = DST_DIR . $file['name'];
			move_uploaded_file($src_path, $dst_path);
			echo "File uploaded successfully.";
			echo "File does not exist.";
		echo "Unsupported request method.";


  • ajax.htm and backend.php should be both places on same php server
  • directory path C:\wamp64\www\uploaded_files\ should be changed to own path - do not forget to put backslash at the end of path and have permission for files writing there


 jQuery file upload with php backend
 jQuery file upload with php backend

See also

  1. JavaScript - how to upload dynamically file with iframe and php server?
  2. JavaScript - how to upload file without page reloading?
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé