Last active
November 3, 2016 04:38
-
-
Save imraheel/e31d2c502eeae5d78e903e6c9294640c to your computer and use it in GitHub Desktop.
php file upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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