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">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <form id="form" method="POST" onsubmit="sendForm(); return false;">
    <input type="file" id="file" />
    <input type="submit" value="Upload" />
  </form>
  <pre id="progress"></pre>
  <script>

	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]);
		}

		$.ajax({
			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 / e.total));
						
						progress.innerText = 'Uploaded ' + tmp + '%';
					};
				}
				
				return xhr;
			},
			success: function (data) {
				file.value = '';
			
				progress.innerText = data;
			},
			error: function(error) {
				progress.innerText = 'Error: ' + error.status;
			}
		});
	}

  </script>
</body>
</html>

backend.php file:

<?php

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

	if($_SERVER['REQUEST_METHOD'] === 'POST')
	{
		if(isset($_FILES['file']))
		{
			$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.";
		}
		else
			echo "File does not exist.";
	}
	else
		echo "Unsupported request method.";

Notes:

  • 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

Result:

 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