JavaScript 고급(6) JavaScript로 파일 읽기 및 저장

JavaScript를 사용하여 파일 읽기 및 저장

Google은 아직 플러그인 데이터 동기화 기능을 제공하지 않기 때문에 플러그인 구성 가져오기 및 내보내기에서는 파일을 처리해야 합니다. 보안상의 이유로 IE만 파일 액세스용 API를 제공하지만 HTML 5가 출시되면서 다른 브라우저도 이를 지원합니다.

먼저 파일을 읽어보겠습니다. W3C는 몇 가지 파일 API를 제공하며 그 중 가장 중요한 것은 FileReader 클래스입니다.

먼저 사용해야 하는 HTML 태그를 나열하세요.

 <input type="file" id="file" onchange="handleFiles(this.files)"/>

파일을 선택하면 파일(FileList 객체)이 포함된 목록이 매개변수로 handlerFiles() 함수에 전달됩니다.

이 FileList 개체는 배열과 유사하며 파일 수를 알 수 있으며 해당 요소는 File 개체입니다.

이름, 크기, lastModifiedDate 및 유형과 같은 속성은 이 파일 객체에서 얻을 수 있습니다.

이 File 객체를 FileReader 객체의 읽기 메소드에 전달하여 파일을 읽습니다.

FileReader에는 4가지 읽기 방법이 있습니다.

readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽습니다.

readAsBinaryString(file): 파일을 바이너리 문자열로 읽습니다.

readAsDataURL(file): 파일을 데이터 URL로 읽습니다.

readAsText(file, [encoding] ) : 파일을 텍스트로 읽습니다. 기본 인코딩 값은 'UTF-8'입니다.

또한 abort() 메서드는 파일 읽기를 중지할 수 있습니다.

FileReader 개체가 파일을 읽은 후에도 계속 처리해야 합니다. 현재 스레드를 차단하지 않기 위해 API는 이벤트 모델을 채택하고 다음 이벤트를 등록할 수 있습니다.

onabort: 중단되면 트리거됩니다.

onerror: 오류가 발생하면 트리거됩니다.

onload: 파일 읽기 성공 페치 완료 시 트리거

onloadend: 실패 여부와 상관없이 파일 읽기 시 트리거

onloadstart: 파일 읽기 시작 시 트리거

onprogress: 파일을 읽을 때

를 주기적으로 트리거하여 파일을 처리할 수 있습니다.

파일 읽기

먼저 텍스트 파일을 읽어 보겠습니다.

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body');             }             reader.readAsText(file);         }     } }

   <span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result，也就是读取出来的文件内容。</span>

테스트해 보면 이 파일의 내용이 웹 페이지에 추가되는 것을 확인할 수 있습니다. Chrome을 사용하는 경우 웹페이지를 서버나 플러그인에 넣어야 합니다. 파일 프로토콜이 실패합니다.

브라우저가 데이터 URI 프로토콜의 그림을 직접 표시할 수 있으므로 그림을 다시 시도해 보겠습니다. 그래서 이번에는 그림을 추가하겠습니다.

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body');             }             reader.readAsText(file);         } else if(/image/w+/.test(file.type)) {             reader.onload = function() {                 $('').appendTo('body');             }             reader.readAsDataURL(file);         }     } }

실제로 input:file 컨트롤은 또한 여러 파일 선택을 지원합니다:

<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>

이러한 방식으로, handlerFiles()는 파일을 탐색하고 처리해야 합니다.

데이터의 일부만 읽으려는 경우 File 객체에는 Blob 객체를 생성하기 위한 webkitSlice() 또는 mozSlice() 메서드도 있습니다. 이 개체는 File 개체와 동일한 방식으로 FileReader에서 읽을 수 있습니다. 이 두 메소드는 3개의 매개변수를 받습니다. 첫 번째 매개변수는 시작 위치이고, 두 번째 매개변수는 끝 위치입니다. 생략하면 세 번째 매개변수는 콘텐츠 유형입니다.

예시는 "JavaScript로 로컬 파일 읽기"를 참고하세요.

물론 데이터 가져오기 및 파일 표시 외에도 AJAX 업로드에도 사용할 수 있습니다. 코드는 "웹 애플리케이션에서 파일 사용"을 참조하세요.

파일 저장

실제로 파일 API: Writer는 4개의 인터페이스를 제공하지만 현재 일부 브라우저(Chrome 8+ 및 Firefox 4+)에서만 BlobBuilder를 구현하고 나머지 인터페이스는 사용할 수 없습니다.

지원되지 않는 브라우저의 경우 BlobBuilder.js 및 FileSaver.js를 사용하여 지원을 받을 수 있습니다.

연구하다가 그 비결을 알아냈습니다.

BlobBuilder는 Blob 개체를 생성할 수 있습니다. 이 Blob 개체를 URL.createObjectURL() 메서드에 전달하여 개체 URL을 가져옵니다. 그리고 이 개체 URL은 이 Blob 개체의 다운로드 주소입니다.

다운로드 주소를 얻은 후 a 요소를 생성하고 href 속성에 다운로드 주소를 할당하고 다운로드 속성에 파일 이름을 할당합니다(Chrome 14+ 지원).

그런 다음 클릭 이벤트를 생성하고 처리를 위해 a 요소에 전달하면 브라우저가 Blob 개체 다운로드를 시작합니다.

마지막으로 URL.revokeObjectURL()을 사용하여 객체 URL을 해제하고 더 이상 이 파일을 참조할 필요가 없음을 브라우저에 알립니다.

다음은 단순화된 코드입니다.

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        blob = slice.call(blob, 0, blob.size, force_saveable_type);
    }
    var url = URL.createObjectURL(blob);
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = url;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

테스트할 때 텍스트 파일을 저장하라는 메시지가 표시됩니다. Chrome은 웹페이지를 서버나 플러그인에 배치해야 합니다.

附:写文件工具类(干货)

	/**
	 * 写文件
	 * @param fileName 文件名
	 * @param data	文件流
	 * @param path	写入路径
	 * @return boolean
	 */
	public static boolean writeFile(String fileName,String data,String path) { 
       try { 
    	   
//    	   System.out.println("fileContent:" + data);
    	   
           File file = new File(path + fileName); 
           
           if(!file.exists()){
        	   file.createNewFile();
           }
           
           FileOutputStream outStream = new FileOutputStream(file);
           outStream.write(data.getBytes());  
           outStream.flush(); 
           outStream.close(); 
           outStream = null;
           return(true);
          
       } catch (Exception e) { 
           e.printStackTrace(); 
           return(false);
       } 
	}

美文美图

 

以上就是JavaScript进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！