Return

Ajax Image Uploader

Drag & Drop Images Here

-or-

Click to open the file Browser

Debug

Uploads

No Files have been selected/droped yet...

HTML

<div class="w3-row">
	<div class="w3-container w3-half">
		<!-- D&D Zone-->
		<div data-type="imageUploader" src="upload.php" class="uploader">
			<div>Drag &amp; Drop Images Here</div>
			<div class="or">-or-</div>
			<div class="browser">
				<label>
					<span>Click to open the file Browser</span>
					<input type="file" name="files[]"  accept="image/*" multiple="multiple" title='Click to add Images'>
				</label>
			</div>
		</div>
		<!-- /D&D Zone -->
		<!-- Debug box -->
		<div class="panel panel-default w3-card">
			<div class="w3-container w3-light-grey">
				<h4>Debug</h4>
			</div>
			<div class="panel-body demo-panel-debug w3-container">
				<ul id="demo-debug">
				</ul>
			</div>
		</div>
		<!-- /Debug box -->
	</div>
	<div class="w3-container w3-half">
		<div class="w3-card">
			<div class="w3-container w3-light-grey">
				<h4>Uploads</h4>
			</div>
			<div class="panel-body demo-panel-files w3-container" id='demo-files'>
				<span class="demo-note">No Files have been selected/droped yet...</span>
			</div>
		</div>
			
	</div>
</div>

PHP

<?php
$res = "failed";
foreach ($_FILES as $file) {
	$tmp_name = $file["tmp_name"];
  	$name = $file["name"];
  	$res = "Successfull";
  	move_uploaded_file($tmp_name, $name);
}

echo json_encode(array('status' => $res));

?>