FileReader에서 XMLHttpRequest가 작동하지 않습니다.

Question

사용자가 이미지와 pdf 파일을 업로드 할 수있는 형식이 있습니다. 지금은 양식을 제출하기 전에 미리 볼 수 있도록 pdf 파일을 jpg 파일로 변환하려고합니다.

나는 파일을 미리하고는 XMLHttpRequest를 전송하는 데 사용하는 자바 스크립트 코드

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

:

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 변환 함수를 작성하지 않은 다음

양식입니다 pdf 파일을 아직 이미지에 넣으려면 현재 단락의 내용으로 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이가 ... 뭔가로 인해 당신을 위해 작동 xhr.send(file)