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?
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.