Drag And Drop File Upload Using JavaScript And PHP

August 25, 2018 XpertPhp

Today, we will know how to upload file using drag and drop. we also know that uploading files use many places. such as product image, the article image, etc.

If you want to simple image upload in php then you can do it. but sometimes we have to image upload using drag drop, at that time we need to this type of example. here we will use the ajax drag and drop file upload PHP. so you can see our drag and drop file upload example.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Drag And Drop File Upload Using JavaScript And PHP - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
	#drop_file_zone {
		background-color: #EEE;
		border: #999 5px dashed;
		width: 290px;
		height: 200px;
		padding: 8px;
		font-size: 18px;
	}
	#drag_upload_file {
	  width:50%;
	  margin:0 auto;
	}
	#drag_upload_file p {
	  text-align: center;
	}
	#drag_upload_file #selectfile {
	  display: none;
	}
  </style>
  <script>
    var fileobj;
	function upload_file(e) {
		e.preventDefault();
		fileobj = e.dataTransfer.files[0];
		ajax_file_upload(fileobj);
	}
	 
	function file_explorer() {
		document.getElementById('selectfile').click();
		document.getElementById('selectfile').onchange = function() {
			fileobj = document.getElementById('selectfile').files[0];
			ajax_file_upload(fileobj);
		};
	}
	 
	function ajax_file_upload(file_obj) {
		if(file_obj != undefined) {
			var form_data = new FormData();                  
			form_data.append('file', file_obj);
			$.ajax({
				type: 'POST',
				url: 'data_upload.php',
				contentType: false,
				processData: false,
				data: form_data,
				success:function(response) {
					alert(response);
					$('#selectfile').val('');
				}
			});
		}
	}
  </script>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col-lg-4"></div>
		<div class="col-lg-4">
			<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
				<div id="drag_upload_file">
					<p>Drop file here</p>
					<p>or</p>
					<p><input type="button" value="Select File" onclick="file_explorer();"></p>
					<input type="file" id="selectfile">
				</div>
			</div>
		</div>
		<div class="col-lg-4"></div>
	</div>
	
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Drag And Drop File Upload Using JavaScript And PHP - XpertPhp</title>

<style>

#drop_file_zone {

background-color: #EEE;

border: #999 5px dashed;

width: 290px;

height: 200px;

padding: 8px;

font-size: 18px;

}

#drag_upload_file {

width:50%;

margin:0 auto;

}

#drag_upload_file p {

text-align: center;

}

#drag_upload_file #selectfile {

display: none;

}

</style>

var fileobj;

function upload_file(e) {

e.preventDefault();

fileobj = e.dataTransfer.files[0];

ajax_file_upload(fileobj);

}

function file_explorer() {

document.getElementById('selectfile').click();

document.getElementById('selectfile').onchange = function() {

fileobj = document.getElementById('selectfile').files[0];

ajax_file_upload(fileobj);

};

}

function ajax_file_upload(file_obj) {

if(file_obj != undefined) {

var form_data = new FormData();

form_data.append('file', file_obj);

$.ajax({

type: 'POST',

url: 'data_upload.php',

contentType: false,

processData: false,

data: form_data,

success:function(response) {

alert(response);

$('#selectfile').val('');

}

});

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

data_upload.php

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . time() . '_' . $_FILES['file']['name']);
 
echo "File uploaded successfully.";

?>