자바 스크립트

를 사용을 FileReader에 의해 완전히 읽기 방법을 잘 파일을 만드는 방법 나는 XML 파일에 정의 된 다양한 HTML 요소를 가지고있다. XML 요소를 전체적으로 표시 할 수는 없지만 여러 행이 있으며 각 행은 확인란, 파일 업로드 옵션 등으로 구성됩니다.자바 스크립트

이러한 요소를 가져온 다음 XMLHTTPRequest를 사용하여 이러한 요청을 보내는 데 자바 스크립트를 사용하고 있습니다. 처리 할 컨트롤러에 연결합니다.

하는 HTML 요소는 아래처럼 상상 :

Row1 ---- Checkbox1_Row1 TextDescription_Row1  FileUpload_Row1  
Row2 ---- Checkbox1_Row2 TextDescription_Row2  FileUpload_Row2

나는 얼마나 많은 가능한 어느 행을 가질 수 있습니다. 자바 스크립트, 나는이 모든 폼 요소를 얻고 이러한 요소는 행 번호 (ROW1, 행 2)에 의해 구분됩니다 사용

I 각 폼 요소를 통해 반복하고 다음

for(var j=0; j< formelements.length; j+++) 
{ 
    if (formElements[j].type == "textbox") 
    { 
     Do something 
    } 
    elseif (formElements[j].type == "file") 
    { 
     var Base64String; 
     var ready = false; 
     var fileName = formElements[j].files[0].name; 

     var check = function() { 
     if (ready === true) {    
     array.push(Base64String);       
     return; 
     } 
     setTimeout(check, 1000); 
     } 

     check(); 

     var reader = new FileReader(); 
      reader.onloadend = function (evt) { 
      Base64String = evt.target.result; 
      ready = true; 
      }; 
     reader.readAsDataURL(file); 
     } 
    }

I 일부 변경 한 후에 제어부로 전송 될 각 행과 최종 값을 갖는 배열에 대응하는 값을 모두 밀어 배열을 사용하고있다. 여기에 파일 업로드 옵션, 나는 각 행에서 파일을 읽고 이진 형식으로 변환하고 컨트롤러에 보냅니다. 이 방법은 단 하나의 행만 있으면 잘 작동합니다. 이 방법은 여러 행이있을 때 폼 요소를 반복하면서 첫 번째 행 (텍스트 상자라고 함)의 모든 내용을 검사하여 배열에 넣지만 파일 유형 일 때 루프로 이동하여 파일. 파일을 읽는 것은 언젠가 여기에 걸리고 시간 루프에 의해 다음 폼 요소 (이것은 Row2 뿐이다)로 간다. 이제 Row2 양식 요소가 그림에 나타나며 파일을 업로드하지 않으면 null이됩니다. 이제 check() 함수가 완료되고 row1의 파일이 완전히 읽혀집니다. 루프가 이미 Row 2 양식 요소에 있으므로이 파일 값은 Null 값을 제외하고 Row2에 할당됩니다. 그래서 Row2는 파일 유형에 대해서는 null 값과 파일 값을 갖지만 Row1에 대해서는 값이 없습니다. 마찬가지로 여러 행에 많은 파일이있는 경우 파일 값은 FileReader에서 읽은 시간을 기준으로 현재 루프에있는 행 양식 요소에 할당됩니다.

나는 파일 값이 다음 폼 요소로 이동하기 전에 완전히 읽어되어 있는지 확인해야합니다. 이것을 달성하는 방법?

************************ 업데이트 ********************* *

중복에 따라서 오는 전용 파일 형식이로 내 마킹 여기에 언급 된 문제, 파일 형식을 통해 그들이 할 수있는 루프. 나에게 폼 요소는 Checkbox1_Row1, TextDescription_Row1, FileUpload_Row1, Checkbox1_Row2, TextDescription_Row2, FileUpload_Row2로 구성됩니다.

나는 FileUpload_Row1 여기에 다음 폼 요소, Checkbox1_Row2로 이동하기 전에 파일에서 읽은 바로 값이 있는지 확인해야합니다.

출처

2017-05-15 Sriram Chandramouli

.push '()' 'Base64String' 같을 때, 물건을 콜백. – guest271314

나는 그것을 시도했지만 여전히 같은 문제에 직면 해있다. –

문제를 설명하기 위해 스택 스 니펫이나 plnkr http://plnkr.co를 만들 수 있습니까? – guest271314

evt은 event이 evt.target.result이어야합니다..push()event.target.result 배열 fileList에 fileList.length는 onloadend```내 array`에 count

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script> 
 
    function myFunction() { 
 
     var files = Array.prototype.map.call(
 
     document.querySelectorAll("[id^=myFile]") 
 
     , function(input) { 
 
      return {id:input.dataset.id, file: input.files[0]}; 
 
     }); 
 

 
     var count = files.length; // total number of files 
 
     var fileList = []; // accepted files 
 

 
     for (var i = 0; i < count; i++) { 
 
     var file = files[i].file; 
 
     var id = files[i].id; 
 
     var filename = files[i].file.name; 
 
     if (i >= count) { 
 
      break; 
 
     } 
 

 
     var reader = new FileReader(); 
 

 
     reader.onload = (function(id, filename) { 
 
      return function(event) { 
 
      fileList.push({id, filename, file:event.target.result}); { 
 
       if (fileList.length === count) { 
 
       // do stuff with `fileList` 
 
       console.log(fileList); 
 
       } 
 
      } 
 
      } 
 
     })(id, filename); 
 
     reader.readAsDataURL(file); 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <input type="file" id="myFile_row1" data-id="A"> 
 
    <input type="file" id="myFile_row2" data-id="B"> 
 
    <input type="file" id="myFile_row3" data-id="C"> 
 

 
    <button onclick="myFunction()">Try it</button> 
 

 
</body> 
 

 
</html>

plnkr

http://plnkr.co/edit/VCGPPbWcock0PgC9wMWi?p=preview

출처

2017-05-16 05:33:33 guest271314

감사합니다. 첫 번째 옵션 (hello.pdf)에 큰 파일 (예 : 5MB)을 업로드하려고하면 두 번째 파일 (check.txt)과 세 번째 업로드 옵션 (image)에 작은 파일 (KB 단위)이 표시됩니다. .jpg) 첫 번째 파일은 크기가 크기 때문에 읽기에 더 많은 시간이 걸리지 만 두 번째 및 세 번째 파일은 시간이 오래 걸립니다. 따라서 두 번째 파일이 먼저 인쇄되고 세 번째 파일이 두 번째로 인쇄되고 첫 번째 파일이 마지막으로 인쇄됩니다. 이것이 제가 오랫동안 직면하고있는 이슈입니다. 순서는 보존되어야합니다. 첫 번째 파일을 읽는 데 얼마나 많은 시간이 걸리며 처음에는 완전히 읽은 다음 두 번째와 세 번째로 읽어야합니다. –

예를 들어 보았는데 그런 식으로 행동했습니다. 현재 루프를 완료하기 전에 다음 루프로 이동합니다 (큰 파일 인 경우). 주문을 보존하는 방법에 대한 제안이 있습니까? –

'FileReader''load' 이벤트는 결과를 비동기 적으로 리턴합니다. 예상되는 주문은 무엇입니까? 사용자 별 파일 선택 순서는 무엇입니까? _ 오랫동안 직면하고있는 문제이며, 그 명령은 보존되어야합니다. "_ 그 요구 사항은 원래의 질문에 설명되어 있습니까? – guest271314

답변

관련 문제