Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

JavaScript - how to upload dynamically file with iframe and php server?

0 contributions
8 points

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

1. File upload with iframe callback example

upload.htm file:

<html>
<head>
  <script>
  
	window.Uploader = function(form, frame) {
		var self = this;

		if(form.getAttribute('target') !== frame.getAttribute('name')) {
			throw new Error('Form is not linked with target frame.');
		}

		frame.addEventListener('load', function() {
			frame.contentWindow.onsuccess = function(message) {
				form.reset();
					
				if(self.onsuccess)
					self.onsuccess(message);
			};

			frame.contentWindow.onerror = function(message) {
				if(self.onerror)
					self.onerror(message);
			};
		});

		frame.addEventListener('error', function() {
			if(self.onerror)
				self.onerror('Loading error.');
		});
	};
  
  </script>
</head>
<body>
  <form
      id="upload-form" 
      action="backend.php" 
      target="upload-frame" 
      method="POST" 
      enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" value="Submit" />
  </form>
  <iframe 
      id="upload-frame" 
      name="upload-frame" 
      style="display:none;">
  </iframe>
  <div id="upload-result"></div>
  <script>
  
		var form = document.getElementById('upload-form');
		var frame = document.getElementById('upload-frame');
		var result = document.getElementById('upload-result');
		
		var uploader = new Uploader(form, frame);
		
		uploader.onsuccess = function(message) {
			result.innerHTML = '<div style="color: green;">' 
				+ 'Success: ' + message 
				+ '</div>';
		};
			
		uploader.onerror = function(message) {
			result.innerHTML = '<div style="color: red;">' 
				+ 'Error: ' + message 
				+ '</div>';
		};
  
  </script>
</body>
</html>

backend.php file:

<html>
<body>
  <script>

	function execute() {
		function action() {
			if (window.onsuccess && window.onerror) { // if event methods appeared
<?php

	define('DST_DIR', 'C:\\wamp64\\www\\uploaded_files\\');
	
	if($_SERVER['REQUEST_METHOD'] === 'POST')
	{
		if(isset($_FILES['file']))
		{
			$file = $_FILES['file'];

			if(empty($file['name']))
				echo "window.onerror('File does not exist!');";
			
			else
			{
				$src_path = $file['tmp_name'];
				$dst_path = DST_DIR . $file['name'];
				
				if(move_uploaded_file($src_path, $dst_path))					
					echo "window.onsuccess('File upload completed.');";
				
				else
					echo "window.onerror('File move error!');";
			}
		}
		else
			echo "window.onerror('File does not exist!');";
	}
	else
		echo "window.onerror('Unsupported request method!');";
				
?>
			} else {
				execute();	
			}
		}
		
		setTimeout(action, 100);
	}

	execute();

  </script>
</body>
<html>

Notes:

  • upload.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:

File upload with hidden iframe.
File upload with hidden iframe.

See also

  1. JavaScript - how to upload file with jQuery?

Merged questions

  1. JavaScript - how to upload dynamically file with iframe and php backend?
  2. JavaScript - how to send file to iframe?
  3. 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