imraheel/php-file-upload.html

## php-file-upload.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>

    <style>
        .fileDropArea {
            padding-top: 25px;
            height: 100px;
            background: #f9f9f9;
            border: 4px dashed #CCC;
            text-align: center;
            position: relative;
            overflow: hidden;
            color: #999;
            cursor: pointer;
            max-width: 500px;
            margin: 40px auto 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .fileDropArea:after {
            content: 'Drop Here';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .fileDropArea input[type="file"] {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            font-size: 100px;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            display: block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="fileDropArea">
        <input type="file" name="" id="" multiple>
    </div>

    <div id="imgPrev"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>


        // Add events
        $('.fileDropArea input[type=file]').on('change', prepareUpload);

        $('.fileDropArea').on('drop',function(e){
            e.preventDefault();

            $('.fileDropArea input[type=file]').prop("files", e.originalEvent.dataTransfer.files);
            $('.fileDropArea input[type=file]').change();
        });


        // Grab the files and set them to our variable
        function prepareUpload(e) {
            var form_data = new FormData();
            $('#imgPrev').html('');
            for (var x = 0; x < e.target.files.length; x++) {
                form_data.append('figrlocation',  $('.fileDropArea input[type=file]').prop('files')[x]);

                var fileName = $('.fileDropArea input[type=file]').val();
                var ext  = fileName.split('.')[1];

                if (ext == 'jpg' || ext == 'jpeg' || ext == 'gif'|| ext == 'png') {
                    uploadFiles(form_data);
                } else {
                    alert('only image upload');
                }
                //console.log('Uploading file '+ x)
                console.log(form_data);

            }
        }
        // Catch the form submit and upload the files
        function uploadFiles(figrlocation) {
            $.ajax({
                url:'submit.php',
                cache: false,
                contentType: false,
                processData: false,
                type:'post',
                data:figrlocation,
                success: function (data) {
                    console.log(data);
                    $('#imgPrev').append('<img src="upload/'+data+'" alt="" style="max-width:200px" />')
                    console.log('File sucessfully uploaded...');
                }
            });
        }
    </script>
</body>
</html>

## submit.php
<?php
function generateKey($timekey) {
    if($timekey==''){
        date_default_timezone_set('America/Los_Angeles');
        $timekey = date("Y-m-d:h:i:s");
    }
    $authKey = md5($timekey);
    return $authKey;
}

if(isset($_FILES['figrlocation'])){
    $name = $_FILES['figrlocation']['name'];
    $linkImg = $_FILES['figrlocation']['tmp_name'];
    // Generate rendom name for each file
    //$key = generateKey('');
    //$ext = pathinfo($name, PATHINFO_EXTENSION);
    //$fileName = $key.".".$ext;
    move_uploaded_file($linkImg, "./upload/{$name}");
    echo $name;
}

?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>File Upload</title>

	<style>
	.fileDropArea {
	padding-top: 25px;
	height: 100px;
	background: #f9f9f9;
	border: 4px dashed #CCC;
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #999;
	cursor: pointer;
	max-width: 500px;
	margin: 40px auto 0;
	font-family: Arial, Helvetica, sans-serif;
	}
	.fileDropArea:after {
	content: 'Drop Here';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	}
	.fileDropArea input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	font-size: 100px;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	display: block;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="fileDropArea">
	<input type="file" name="" id="" multiple>
	</div>

	<div id="imgPrev"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script>


	// Add events
	$('.fileDropArea input[type=file]').on('change', prepareUpload);

	$('.fileDropArea').on('drop',function(e){
	e.preventDefault();

	$('.fileDropArea input[type=file]').prop("files", e.originalEvent.dataTransfer.files);
	$('.fileDropArea input[type=file]').change();
	});



	// Grab the files and set them to our variable
	function prepareUpload(e) {
	var form_data = new FormData();
	$('#imgPrev').html('');
	for (var x = 0; x < e.target.files.length; x++) {
	form_data.append('figrlocation', $('.fileDropArea input[type=file]').prop('files')[x]);

	var fileName = $('.fileDropArea input[type=file]').val();
	var ext = fileName.split('.')[1];

	if (ext == 'jpg' \|\| ext == 'jpeg' \|\| ext == 'gif'\|\| ext == 'png') {
	uploadFiles(form_data);
	} else {
	alert('only image upload');
	}
	//console.log('Uploading file '+ x)
	console.log(form_data);

	}
	}
	// Catch the form submit and upload the files
	function uploadFiles(figrlocation) {
	$.ajax({
	url:'submit.php',
	cache: false,
	contentType: false,
	processData: false,
	type:'post',
	data:figrlocation,
	success: function (data) {
	console.log(data);
	$('#imgPrev').append('<img src="upload/'+data+'" alt="" style="max-width:200px" />')
	console.log('File sucessfully uploaded...');
	}
	});
	}
	</script>
	</body>
	</html>
	<?php
	function generateKey($timekey) {
	if($timekey==''){
	date_default_timezone_set('America/Los_Angeles');
	$timekey = date("Y-m-d:h:i:s");
	}
	$authKey = md5($timekey);
	return $authKey;
	}

	if(isset($_FILES['figrlocation'])){
	$name = $_FILES['figrlocation']['name'];
	$linkImg = $_FILES['figrlocation']['tmp_name'];
	// Generate rendom name for each file
	//$key = generateKey('');
	//$ext = pathinfo($name, PATHINFO_EXTENSION);
	//$fileName = $key.".".$ext;
	move_uploaded_file($linkImg, "./upload/{$name}");
	echo $name;
	}

	?>