FileReaderでXMLHttpRequestが動作しない

Question

私は、ユーザーが画像とpdfファイルをアップロードできる形式を持っています。今は、フォームを提出する前にプレビューできるように、pdfファイルをjpgファイルに変換しようとしています。

ここ形式です：

<form> 
    <div class="fileUpload"> 
     <p class="fileformats">Valid formats: jpg/png/gif/jpeg/pdf</p><br> 
     <input type="file" name="overlayfile[]" class="src" onchange="preview(this)"> 
     <img src="img/someimage.jpg" class="target"/> 
    </div> 
</form> 
<p id="item"></p> 

JavaScriptのコード私は、ファイルをプレビューするとのXMLHttpRequestを送信するために使用します。

function preview(input) { 

    if(input.files && input.files[0]) { 
     var reader = new FileReader(); 

     if(input.files[0].type == "image/jpeg" || input.files[0].type == "image/gif") { 
      reader.onload = function(e) { 

       input.nextElementSibling.src = e.target.result; 

      } 

      reader.readAsDataURL(input.files[0]); 
     } else if (input.files[0].type == "application/pdf") { 

      reader.onload = function(e) { 
       var targeturl = e.target.result; 
       getURL(targeturl); 
      } 
     } 
    } 
} 

function getURL (item) { 

    var request = new XMLHttpRequest(); 

    request.onreadystatechange = function() { 
     if(request.readyState == 4 && request.status == 200) { 
      document.getElementById("item").innerHTML = request.responseText; 
     } 
    } 

    request.open("GET", "preview.php?url="+item, true); 
    request.send(); 
} 

（I変換する関数を記述しませんでしたが、私の段落の内容としてtargetの値を渡そうとしているだけです。私はこれをやっているので、私はそれを一歩一歩進めていきたいので、私は間違いを逃さないそれw ouldは後で非常に迷惑になる）。私は私のgetURL()関数内で変数を宣言するとき

は、それだけで正常に動作しますと、私はreader.onload何も起こらない内から関数を呼び出すときに段落が、しかし、変数の値を表示します。 それは誰が、なぜ私はそれを修正することができます知っていますか？

コード/詳細な説明が必要な場合は、事前にお知らせください。ありがとうございます。

Answer 1

おそらく、サーバーにアップロードする必要はありません。 iframeを作成して表示するだけで済みます。

また、filereaderは必要なく、代わりにobjectURLを作成します。それはより速く、より良いです。 base64は〜3倍でコ​​ンパイルに時間がかかります。

function preview(input) { 
    const URL = window.URL || window.webkitURL 

    Array.from(input.files).forEach(file => { 
    if (file.type.startsWith('image')) { 
     input.nextElementSibling.src = URL.createObjectURL(file) 
    } else if (file.type == 'application/pdf') { 
     let iframe = document.createElement('iframe') 

     iframe.src = URL.createObjectURL(file) 
     iframe.onload = function() { 
     document.getElementById("item").appendChild(iframe) 
     } 
     iframe.onerror = function(){ 
     // failed to load pdf 
     } 
    } 
    }) 
} 

のiframeが原因何かにあなたのために動作しない場合は... POST xhr.send(file)