Objective
I am wanting to be able to upload PDF only files to a website and place the date and time after the name of the file (Would like to also place those file names into a MySQL field to be able to access latter from another page.) Is there a way to also get drag and drop to work in IE?
index.php
- Code: Select all
<!DOCTYPE html>
<html lang="en">
<!-- Original code can be found at http://www.thetutlage.com/post=TUT92 -->
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style type="text/css">
#uploads{
width: 800px;
margin: auto;
height: 200px;
border: 4px dotted #000;
z-index: 3000;
position: relative;
}
#filesarea{
left: 26.15%;
position: absolute;
top: 1.5%;
width: 800px;
}
.image{
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div id="mainWrapper">
<div id="uploads"></div> <!-- upload box -->
<div id="filesarea"></div> <!-- Box where image shows after being uploaded -->
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/file.drop.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</div><!--end mainWrapper-->
</body>
</html>
upload.php
- Code: Select all
<?php
$filename = $_FILES['imagefile'];
$uploaddir = 'uploads/'; //Name of directory where files are uploaded to
$new_file_name = date("His").'_'.$filename['name']; //Places Time stamp in front of filename.
if(move_uploaded_file($filename['tmp_name'], $uploaddir.$new_file_name))
{
echo json_encode($new_file_name);
}
?>
custom.js
- Code: Select all
$(function(){
$('#uploads').filedrop({
url: 'upload.php',
paramname: 'imagefile',
fallbackid: 'upload_button',
maxfiles: 5, //Max files able to be uploaded
maxfilessize: 20, //Max File Size
error: function(err,file)
{
switch(err)
{
case 'BrowserNotSupported':
$('#filesarea').append('Your browser does not support this uploader');
break;
}
},
uploadFinished: function(i,file,response)
{
$('#filesarea').append('<span class="image"> <img src="uploads/' + response + '" width="100%" height="100%" /></span>') //Shows the image in the same location as were the file is dropped.
}
});
});
