PHP, JS drag and drop a file.

General discussions related to php

Moderators: macek, egami, gesf

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

PHP, JS drag and drop a file.

Postby chris122380 » 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

Re: PHP, JS drag and drop a file.

Postby chris122380 » 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");
   
}

?>


Return to “PHP General”

Who is online

Users browsing this forum: No registered users and 1 guest

cron