2

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

このプロジェクトでは、開発者は pdf を入力として受け取り、それを変数「input」に渡します。誰でも自分のpdfをアップロードできるように、アップロードメニュー/ドロップゾーンを作成し、変数「input」に自動的に渡されてテキストを抽出できるようにしたいと考えています。ファイルをアップロードすることはできます が、その pdf を変数「input」に渡す方法がわかりません。

<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>
4

1 に答える 1

1

アップロードしたファイルのコピーを Pdf.js に指定するだけです。

上記のコードでは、 Pdf.js は XMLHttpRequest を介してデータを取得し、srcID を持つ要素の属性として定義されたファイル名を持つ .pdf を探しinputます。

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

srcこの要素の属性を、サーバーにアップロードした PDF のファイル パスに設定すると、スクリプトはそのまま動作するはずです。

これは、PHP を呼び出してファイル ( ) が提供index.htmlされているのと同じディレクトリにファイルをアップロードする単純なファイル アップロード フォームです。アップロードされたファイルを保存し、次の行で iframe の属性の値を設定します。index.htmlfile_upload.phpsrc

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

index.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>
于 2015-06-29T19:51:54.600 に答える