xhr 요청에서 null이 파일 전송을 기대합니다.

Question

파일을 업로드하려면 순수하고 가벼운 javascript/html5 함수를 만들어야합니다.

거의 끝났어하지만 난 파일을 선택하면 지금은 아래의 설명을 참조하시기 바랍니다 내가 확인 동일한 이름

사용하여 서버에 빈 파일을 생성하고 filereader API는 파일 에 액세스하지 못할 표시됩니다

function uploadFileViaXHR(file){ 
     var boundary = "-------boundary"; 
     var content = '--' + boundary + '\r\n'; 
     content += 'Content-Disposition: form-data; name="file";'; 
     content += 'filename="' + encodeURIComponent(file.name) + '"'; 
     content += '\r\nContent-Type: application/octet-stream\r\n'; 
     content += '\r\n'; 

     reader = new FileReader(); 
     reader.readAsBinaryString(file); 

     content += reader.result; 
     content += '\r\n--' + boundary + '--\r\n'; 
     console.log(content); 
     var xhr = new XMLHttpRequest(); 
     onUploadBegin(elemId, xhr, file.name, file.size); 
     $('#' + elemId).addClass('html5'); 

     xhr.upload.onabort = function(e) { onUploadAbort(elemId, e); }; 
     xhr.upload.onerror = function(e) { onUploadError(elemId, e); }; 
     xhr.upload.onprogress = function(e) { onUploadProgress(elemId, e); }; 
     xhr.onload = function(e) { onUploadComplete(elemId, e); }; 

     xhr.open("POST", url, true); 
     xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary); 
     xhr.setRequestHeader("Cache-Control", "no-cache"); 

     // pseudo standard fields. 
     xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
     xhr.setRequestHeader("X-File-Name", file.name); 
     xhr.setRequestHeader("Content-Length", file.fileSize); 
     xhr.sendAsBinary(content); 
    } 

파일이 로컬 서버의 출력 console.log

---------boundary 
Content-Disposition: form-data; name="file";filename="145792_748.jpg" 
Content-Type: application/octet-stream 

null 
---------boundary-- 

과 있어요 내가이 줄을 변경할 때 그것은 또한 빈 파일 을 IDE : content += reader.result; 아웃 지역 넣어이

---------boundary 
Content-Disposition: form-data; name="file";filename="145792_748.jpg" 
Content-Type: application/octet-stream 

[object FileReader] 
---------boundary-- 

하고 서버가 [object FileReader]의 내용으로 파일을

content += reader;에를! 어떻게 해결할 수 있습니까?

Answer 1

읽기 파일 대신 FormData을 사용하십시오.

는 더 간단 또한

보낼 수있는 외부 데이터도 파일

function uploadFileViaXHR(file){ 

      fd = new FormData(); 
      fd.append('field1', 'aaaa'); 
      fd.append('file', file); 

     var xhr = new XMLHttpRequest; 
     xhr.open('POST', url, true); 

     onUploadBegin(elemId, xhr, file.name, file.size); 
     $('#' + elemId).addClass('html5'); 

     xhr.upload.onabort = function(e) { onUploadAbort(elemId, e); }; 
     xhr.upload.onerror = function(e) { onUploadError(elemId, e); }; 
     xhr.upload.onprogress = function(e) { onUploadProgress(elemId, e); }; 
     xhr.onload = function(e) { onUploadComplete(elemId, e); }; 

     xhr.send(fd); 
} 

와 fd.append('field1', 'aaaa');