如何將上傳的 pdf 文件傳遞給變量。 (PDF.JS)

Question

參考： http : //git.macropus.org/2011/11/pdftotext/example/

在這個項目中，開發人員將 pdf 作為輸入並將其傳遞給變量“輸入”。 我想創建一個上傳菜單/拖放區，以便任何人都可以上傳他們的 pdf，它會自動傳遞給變量“輸入”，並且可以提取文本。 我可以上傳文件，但不知道如何將該 pdf 傳遞給變量“輸入”。

<body>
    <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
          <div id="drop">
            Drop Here
                <a>Browse</a>
            <input id="inputx" src="./"type="file" name="upl" multiple />
          </div>

          <ul>
            <!-- The file uploads will be shown here -->
          </ul>

        </form>

現在使用此表單將上傳 pdf，現在我們必須將變量“input”傳遞給它。

          <script>     
          var input = document.getElementById("input");
          var processor = document.getElementById("processor");
          var output = document.getElementById("output");

          window.addEventListener("message", function(event){
            if (event.source != processor.contentWindow) return;

            switch (event.data){
              case "ready":
                var xhr = new XMLHttpRequest;
                xhr.open('GET', input.getAttribute("src"), true);
                xhr.responseType = "arraybuffer";

                xhr.onload = function(event) {
                  processor.contentWindow.postMessage(this.response, "*");
                };

                xhr.send();

              break;

              default:
                 output.innerHTML = event.data.replace(/\s+/g, " ");
                break;
            }
          }, true);
          </script>
    </body>

Answer 1

您只需要將 Pdf.js 指向您上傳的文件的副本。

在上面的代碼中，Pdf.js 通過 XMLHttpRequest 獲取其數據，其中它查找文件名定義為 ID input元素的src屬性的 .pdf ：

xhr.open('GET', input.getAttribute("src"), true);

如果將此元素的src屬性設置為已上傳到服務器的 pdf 的文件路徑，則腳本應按原樣工作。

下面是一些可能對您有所幫助的代碼 - index.html是一個簡單的文件上傳表單，它調用 PHP 將文件上傳到它 ( index.html ) 所在的同一目錄中。 file_upload.php保存上傳的文件並使用以下行在 iframe 上設置src屬性的值：

<iframe id="input" src= <?php print $_FILES['userfile']['name'] ?> ></iframe>

索引.html

<html>
<head>
  <title>Converting PDF To Text using pdf.js</title>
</head>

<body>
  <div>
    <!-- the PDF file must be on the same domain as this page -->
    <form enctype="multipart/form-data" action="file_upload.php" method="POST">
      <input id="fileInput" type="file" name="userfile"></input>
      <input type="submit" value="Submit">
    </form>
  </div>

</body>
</html>

file_upload.php

<?php

$uploadfile = basename($_FILES['userfile']['name']);

echo '<pre>';
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n";
} else {
    echo "Possible file upload attack!\n";
}

echo 'Here is some more debugging info:';
print_r($_FILES);

print "</pre>";

?>

<html>
<head>
  <title>Converting PDF To Text using pdf.js</title>
  <style>
  html, body { width: 100%; height: 100%; overflow-y: hidden; padding: 0; margin: 0; }
  body { font: 13px Helvetica,sans-serif; }
  body > div { width: 48%; height: 100%; overflow-y: auto; display: inline-block; vertical-align: top; }
  iframe { border: none; width: 100%; height: 100%; }
  #output { padding: 10px; box-shadow: 0 0 5px #777; border-radius: 5px; margin: 10px; }
  #processor { height: 70px; }
  </style>
</head>

  <div>
    <!-- embed the pdftotext web app as an iframe -->
    <iframe id="processor" src="../"></iframe>

    <!-- a container for the output -->
    <div id="output"><div id="intro">Extracting text from a PDF file using only Javascript.<br>Tested in Chrome 16 and Firefox 9.</div></div>
  </div>

  <div>
    <iframe id="input" src= <?php print $_FILES['userfile']['name'] ?> ></iframe>
  </div>

  <script>
  var input = document.getElementById("input");
  var processor = document.getElementById("processor");
  var output = document.getElementById("output");

  window.addEventListener("message", function(event){
    if (event.source != processor.contentWindow) return;

    switch (event.data){
      case "ready":
        var xhr = new XMLHttpRequest;
        xhr.open('GET', input.getAttribute("src"), true);
        xhr.responseType = "arraybuffer";

        xhr.onload = function(event) {
          processor.contentWindow.postMessage(this.response, "*");
        };

        xhr.send();
      break;

      default:
        output.textContent = event.data.replace(/\s+/g, " ");
      break;
    }
  }, true);
  </script>

</body>
</html>

如何將上傳的 pdf 文件傳遞給變量。 (PDF.JS)

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-29 19:51:54

如何將上傳的 pdf 文件傳遞​​給變量。 (PDF.JS)

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-29 19:51:54

如何將上傳的 pdf 文件傳遞給變量。 (PDF.JS)

解決方案1
1 已采納 2015-06-29 19:51:54