JavaScript의 HTML5 파일 처리?

자바 스크립트에서 파일 (ASCII 또는 바이너리)을 변수 (var file = "text";)로로드하는 데 사용되는 기술은 무엇입니까?JavaScript의 HTML5 파일 처리?

2012-10-24 htmlfarmer

http://www.html5rocks.com/en/tutorials/file/dndfiles ([구글] (에 의해 발견 HTTPS : //www.google.com/search? q = html5 + read + file)) – BalusC

var file = $ _FILES [ "filename"]; 굉장 할 것입니다. – htmlfarmer

파일이 클라이언트 또는 서버 측에로드됩니까? – ferrants

새로운 HTML5 방식을 사용하려면이 방법을 사용하십시오. File()이라는 메서드를 만들었지 만 이것은 진정한 HTML5 메서드가 아니라 래퍼 (wrapper)입니다. 나중에 변경 될 수 있으므로주의해야합니다 (이름을 바꿀 수도 있음).

HTML :

<html> 
    <body> 
     <input type="file" id="files" name="file"/> 
     <button onclick="load()">Load File</button><br /><br /> 
     <div id="content"></div> 
     <script> 
     function load() { 
      var fileObj = document.getElementById("files"); 
      var fp = new File(fileObj); 
      fp.read(callback); 
     } 
     function callback(text) { 
      var content = document.getElementById("content"); 
      content.innerHTML = text; 
     } 
     </script> 
    </body> 
    </html>

자바 스크립트 :

function File(name) { 
    this.name = document.getElementById(name) ? document.getElementById(name).files : name.files ? name.files : name; 
} 

// Reads the file from the browser 
File.prototype.read = function(callback) { 
    var files = this.name; 
    if (!files.length) { 
    alert('Please select a file!?'); 
    return; 
    } 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.onloadend = function(evt) { 
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
     callback(evt.target.result); 
    } 
    }; 
    var data = file.slice(0, file.size); 
    reader.readAsBinaryString(data); 
}

출처

2012-11-30 04:01:32 htmlfarmer

-1

PHP 또는 Rails (또는 서버 측을 사용하는 모든 것)에서 JavaScript를 생성하고 파일을 포함하십시오.

<?php 
$my_string = file_get_contents('/path/to/file.txt'); 
?> 

<script> 
var my_js_file_string = "<?php echo $my_string; ?>"; 
... 
document.write(my_js_file_string); 
</script>

출처

2012-10-24 18:20:17 ferrants

또는 파일이 클라이언트 측에서 요청할 수있는 경우 파일에 대한 ajax 요청을 실행하십시오. – ferrants

HTML5에 도움이되는 몇 가지 새로운 방법이 있습니다. – htmlfarmer

HTML DOM에서 파일을 사용하는 경우 JavaScript로 모든 것을 수행하는 것이 가장 좋습니다. 파일이 MySQL을 업데이트하는 경우 JavaScript로 MySQL 데이터베이스에 연결하는 코드를 작성했습니다. 곧 MySQL 서버에 Java 코드를 작성하여 서버가 다운 될 필요가 없도록 할 것입니다. – htmlfarmer

당신은 파일을 파일 입력을 통해 선택되는 하나에 새로운 HTML5 파일 API와 XMLHttpRequest를 2

당신은들을 수 있습니다를 사용하거나 & 브라우저로 떨어졌다 드래그합니다. input[type="file"] 방법에 대해 이야기 해 봅시다.

<input type="file">

선택중인 파일을 들어 봅시다.

var input; // let input be our file input 
input.onchange = function (e) { 
    var files = input.files || []; 
    var file = files[0]; 
    if (file) { 
    uploadFile(file); 
    } 
};

실제 멀티 파트 파일 업로드 요청을 만들려면 FormData 개체가 필요합니다. 이 객체는 HTTP POST 요청의 본문을 나타냅니다.

var uploadFile = function (file) { 
    var data = new FormData(); 
    data.append('filename', file); 

    // create a HTTP POST request  
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', './script.php', true); 
    xhr.send(data); 

    xhr.onloadend = function() { 
    // code to be executed when the upload finishes 
    }; 
};

또한 업로드 진행 상황을 모니터링 할 수 있습니다.

xhr.upload.onprogress = function (e) { 
    var percentage = 100 * e.loaded/e.total; 
};

설명이 필요하면 문의하십시오.

출처

2012-10-24 18:35:38

그러나 모든 코드를 시도하지는 않았지만 새로운 HTML5 방식은 정말 훌륭합니다 ... 테스트를 마쳤습니다. – htmlfarmer

JavaScript의 HTML5 파일 처리?

답변

관련 문제