PDF 文件上传 AJAX HTML - pdf file upload ajax html

pdf file upload ajax html

本文关键字：AJAX HTML 文件 PDF | 更新日期: 2023-09-27

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

这是我如何在我的 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);

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

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

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

使用 jQuery 版本 "jquery-1.10.2.min.js"

使用此 AJAX

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

在PHP页面上，只需使用此行

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

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

内容类型
进程数据

这是使用这些来上传和访问 AJAX 中的所有数据所必需的。

希望这对您有所帮助。