Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

JavaScript - how to upload file with jQuery?

0 contributions
9 points

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?
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more