pdf file upload ajax html

Question

    var file = $('#image').prop('files')[0];
    var filename = $('#af_rpta_propertyland_filename').val();

    var form_data = new FormData();
    form_data.append('file', file);
    alert(form_data);


    $.ajax({
        type: 'POST',
        url: '../include/upload.php',
        //dataType: "json",
        data: {
            file: form_data,
            filename: filename
        },
        success: function(data) {
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                console.log("file " + i + ": " + data[i].file);
            }

        },
        error: function(data) {
            alert('No Record Found: ' + data);
        }


    });

<input id="image" name="image" type="file" />

This how i upload my pdf file using ajax in my php code i do it like this

$file = mysql_real_escape_string($_POST['file']);
$filename = mysql_real_escape_string($_POST['filename']);
    if (isset($_FILES['file']) && $_FILES['file']['size'] > 0) { 
                $tmpName  = $_FILES['file']['tmp_name'];  
                $filetype = $_FILES['file']['type'];
                $fp = fopen($tmpName, 'rb'); // read binary
    $upload[] = array('filename' => $filename,'file' => $fp);

    }

echo json_encode($upload, JSON_UNESCAPED_UNICODE);

From my input(type file) how can i place the value(the pdf file) in to data(in ajax) and from data(ajax) how can i pass it to php file so that i can check if the $_files is not empty

Answer 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/