javascript pdf文件上传ajax html

pdf file upload ajax html

提问by Brownman Revival

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

<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

这是我如何在我的 php 代码中使用 ajax 上传我的 pdf 文件我这样做

$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 $_filesis not empty

从我input(type file)如何将它value(the pdf file)放入data(in ajax)和从我如何data(ajax)将它传递给 php 文件，以便我可以检查它$_files是否不为空

回答by guest271314

Try creating a jsonobject from files[0]properties , converting fileto base64string

尝试json从files[0]属性创建一个对象，转换file为base64字符串

js

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

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

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

回答by Sunil Pachlangia

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

使用 jQuery 版本“jquery-1.10.2.min.js”

Use this AJAX

使用这个 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

在 PHP 页面上只需简单地使用这一行

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

In this code i have used two new events

在这段代码中，我使用了两个新事件

1. contentType
2. processData

1. 内容类型
2. 处理数据

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

这对于使用这些上传和访问 AJAX 中的所有数据是必要的。

Hope this will help you.

希望这会帮助你。