Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to File Upload Drag and Drop using HTML5 and JavaScript

by
Category:javascript
javascript jquery
How to File Upload Drag and Drop using HTML5 and JavaScript

In this article we have created drag and drop feature which is based on File DataTransfer object. DataTransfer object holds information about the user interaction, including what files (if any) the user dropped on the element to which the event is bound.

<style>
	#drop_zone
	{
		background-color: #eee;
		border: #999 5px dashed;
		width: 290px;
		height: 200px;
		padding: 8px;
		font-size: 18px;
	}
</style>
<script>
	function drag_drop(event)
	{
		event.preventDefault();
		console.log(event.dataTransfer.file[0]);
		console.log(event.dataTransfer.file[0].name);
		console.log(event.dataTransfer.file[0].size+" bytes");
	}
</script>

<h1>File Upload Drop Zone</h1>
<div id="drop_zone" ondrop="drag_drop(event)" ondragover="return false" >
</div>

0 Comments


Html code work in comment box


Related Post