pdf file upload ajax html

Solution 1:

Try creating a json object from files[0] properties , converting file to base64 string

js

$("#image").on("change", function(e) {
  var name = $("#af_rpta_propertyland_filename").val()
  , file = e.target.files[0]
  , filename = name.length > 1 ? name + ".pdf" : file.name
  , filetype = file.type
  , filesize = file.size
  , data = {
      "filename":filename,
      "filetype":filetype,
      "filesize":filesize
    }
  , reader = new FileReader();
    reader.onload = function(e) {
      data.file_base64 = e.target.result.split(/,/)[1];
        $.post("fileupload.php", {file:data}, "json")
        .then(function(data) {
          // parse `json` string `data`
          var filedata = JSON.parse(data)
          // do stuff with `data` (`file`) object
          , results = $("<a />", {
                "href": "data:" + filedata.filetype 
                        + ";base64," + filedata.file_base64,
                "download": filedata.filename,
                "target": "_blank",
                "text": filedata.filename
              });
          $("body").append("<br>download:", results[0]);
        }, function(jqxhr, textStatus, errorThrown) {
          console.log(textStatus, errorThrown)
        })
    };
    reader.readAsDataURL(file)
});

php

<?php
  if (isset($_POST["file"])) {
    // do php stuff
    // call `json_encode` on `file` object
    $file = json_encode($_POST["file"]);
    // return `file` as `json` string
    echo $file;
};

jsfiddle http://jsfiddle.net/guest271314/LL95z474/

Solution 2:

Use jQuery version "jquery-1.10.2.min.js"

Use this AJAX

$.ajax({
        url: "YourPage.php", 
        type: "POST",             
        data: new FormData('YourFormId'), 
        contentType: false,                  
        processData:false,        
        success: function(data)   
        {
            // Do your Stuff
        }
    });

At PHP page just simply use this line

$name = $_FILES['file']['name'];

In this code i have used two new events

1. contentType
2. processData

This is necessary to use these to upload and access all data in AJAX.

Hope this will help you.