2014-06-19 2 views
-1

파일을 업로드 할 HTML 양식이 있습니다.자바 스크립트를 사용하여 파일을 문자열로 가져 오기

목표는 양식을 제출하고 파일에 XML 확장자가 있는지 확인한 다음 파일을 JavaScript 변수에 String으로 가져 오는 것입니다.

그런 다음이 문자열을 사용하여 서버에 POST 요청을 보내려고합니다.

어떻게 할 수 있습니까?

+1

@Dalorzo : 예 할 수 있습니다 ([추가] (http://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and- 바이너리/3146509 # 3146509)). 그러나 나는 OP가 정말로 원하고 있다고 생각하지 않는다. –

+0

@ user : 폼을 "제출 중"이고 폼의 데이터를 JavaScript 변수에 넣으려고한다고 말했을 것입니다. 서버에서 JavaScript를 사용하고 있습니까? –

+3

설명을 위해 파일을 서버에 업로드하고 서버의 파일에서 클라이언트로 데이터를 보낸 다음 클라이언트의 데이터를 다시 서버로 보내려고합니다. 나는 당신의 주된 목표가 무엇인지 모르겠다. 그러나 나는 당신의 접근 방식이 꺼져 있다고 생각한다. – Smeegs

답변

1

목표는 양식을 제출하고 파일에 XML 확장자가 있는지 확인한 다음 파일을 JavaScript 변수로 String으로 가져 오는 것입니다.

이 단계에서 양식을 제출하려는 것 (서버에 보내는 것처럼)은 아닙니다.

그런 다음이 String을 사용하여 서버에 POST 요청을 보내려합니다.

당신은 most modern ones하지만 IE8 또는 IE9입니다 File API를 지원하는 브라우저에서 해당 작업을 수행 할 수 있습니다. 예가 in this answer입니다. 기본적으로

, 당신은 그것을, 그 이름을 확인 읽어보십시오 <input type="file"> 요소의 files 목록에서 File 인스턴스를 얻을 다음 그것을 게시 : 나는 당신을 가정합니다 POST 비트보다

Complete Example (source) (다른)을 수행하는 방법을 알고 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
</head> 
<body> 
    <input type="file"> 
    <button>Go</button> 
<script> 
    (function() { 
    "use strict"; 

    // Get our input element and our button; in this example there's 
    // just one of each, you'd narrow down these selectors of course 
    var inputElement = document.querySelector("input[type=file]"), 
     button = document.querySelector("button"); 

    if (typeof FileReader !== 'function') { 
     alert("The file API isn't supported on this browser."); 
     inputElement.style.display = button.style.display = "none"; 
     return; 
    } 
    if (!inputElement.files) { 
     alert("Odd, this browser has FileReader but no `files` property on the input element."); 
     inputElement.style.display = button.style.display = "none"; 
     return; 
    } 

    button.addEventListener("click", function() { 
     var file, filename, reader, filedata; 

     // Does it have any files? 
     if (inputElement.files.length === 0) { 
     alert("No file chosen"); 
     return; 
     } 

     // Get its first file 
     file = inputElement.files[0]; 

     // Get its name in lower case 
     filename = file.name.toLowerCase(); 

     // XML extension? 
     if (filename.substr(-4) !== ".xml") { 
     alert("Please only choose .xml files"); 
     } 
     else { 
     // Yes, read it 
     reader = new FileReader(); 
     reader.onload = function() { 
      // Get the file data, note that this happens asynchronously 
      filedata = reader.result; 
      // Send your POST with the data; here, we'll just dump it out 
      // as text 
      displayXml(filedata); 
     }; 
     reader.readAsText(file); // or you can use readAsBinaryString 
     } 
    }, false); 

    function displayXml(xmlText) { 
     var pre = document.createElement('pre'); 
     pre.innerHTML = xmlText.replace(/&/g, "&amp;").replace(/</g, "&lt;"); 
     document.body.appendChild(pre); 
    } 
    })(); 
</script> 
</body> 
</html> 
관련 문제