PHP, JS drag and drop a file.

General discussions related to php

Moderators: egami, macek, gesf

Post Reply
chris122380
New php-forum User
New php-forum User
Posts: 30
Joined: Mon Jun 25, 2012 12:41 pm

Mon Jul 30, 2012 12:58 pm

I am looking for a way to drag and drop pdf files into a page (Upload). I have tried the code found at http://www.thetutlage.com/post=TUT92 but seems to only allow me to upload images and not PDF files. I have edited the code with notes to show what they do and to fix a div alignment problem. I have tried changing the $_FILES from imagefile to files and didn't work. If there is another method for doing this I am willing to look at other code options.

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. 
		}
	});
});

chris122380
New php-forum User
New php-forum User
Posts: 30
Joined: Mon Jun 25, 2012 12:41 pm

Tue Jul 31, 2012 1:25 pm

Hear is a upload option (With out Drag and Drop) but still unsure how to verify the file with a spec # and then attach it to a field in the spec_database. Index.html has the upload form and the upload.php handles the request from the form. How can I have a upload assigned to a mysql field in a database so that when I request a spec it knows what file goes with that spec and then auto generate a link to the file?

Index.html

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>Uploading files</title>
</head>
<body>
    <h1>Uploading files</h1>
    <hr><!-- Makes a Horizontal line accross the page-->
    
    <!-- Upload Form -->
    <form action='upload.php' method='post' enctype='multipart/form-data'>
        
        File: <input type='file' name='upload'>
        <input type='submit' name='submit' value='Upload File Now'>
        
    </form>
    
</body>
</html>
upload.php

Code: Select all

<?php

if($_POST['submit']){
    
    // Assign uploaded file information to Variables
    $name = $_FILES['upload']['name'];
    $temp = $_FILES['upload']['tmp_name'];
    $type = $_FILES['upload']['type'];
    $size = $_FILES['upload']['size'];
    
 // Validate variables   echo "$name<br />$temp<br />$type<br />$size";
    
    // File types allowed to be uploaded
    if(($type == 'application/pdf') || ($type == 'application/msword') || ($type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') || ($type == 'application/vnd.ms-excel') || ($type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || ($type == 'image/jpg') || ($type == 'image/jpeg')){
    
    
    //Limit file size to 30mb $size is the max file size alloud. 
    if($size <= 31457280){
        
        // echo "The file: $name size is $size";
        
        move_uploaded_file($temp,"documents/$name");
        echo "<img src='$name'>";
        
    }else{
        
        echo "The file: $name is to big....<br />The size is $size and need to be less than 30mb";
        
    }
    
    
    
    }else{
        
        echo "This type $type is not allowed";
        
    }
    
    
}else{
    
    header("Location: index.html");
    
}

?>

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests