Skip to content

Instantly share code, notes, and snippets.

@imraheel
Last active November 3, 2016 04:38
Show Gist options
  • Save imraheel/e31d2c502eeae5d78e903e6c9294640c to your computer and use it in GitHub Desktop.
Save imraheel/e31d2c502eeae5d78e903e6c9294640c to your computer and use it in GitHub Desktop.
php file upload
<!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;
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment