관련 무료 학습 권장 사항:javascript(동영상)
Google은 아직 플러그인 데이터 동기화 기능을 제공하지 않기 때문에 플러그인 구성 가져오기 및 내보내기는 파일을 처리해야 합니다. 보안상의 이유로 IE에서만 파일 액세스용 API를 제공하지만 HTML 5가 출시되면서 다른 브라우저에서도 이를 지원하게 되었습니다.
먼저 파일을 읽어보겠습니다. W3C는 몇 가지 파일 API를 제공하며 그 중 가장 중요한 것은 FileReader 클래스입니다.到 먼저 사용해야 하는 HTML 레이블을 나열하십시오.
파일을 선택하면 파일(FileList 개체)이 포함된 목록을 매개 변수로 Handlefiles() 함수에 전달합니다.
이 FileList 개체는 배열과 유사하며 파일 수를 알 수 있으며 해당 요소는 File 개체입니다.
이 파일 객체에서 이름, 크기, lastModifiedDate 및 유형과 같은 속성을 얻을 수 있습니다.
파일을 읽으려면 이 File 개체를 FileReader 개체의 읽기 메서드에 전달하세요.
FileReader에는 4가지 읽기 방법이 있습니다.
readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽습니다.
ReadAsBinaryString(file): 파일을 바이너리 문자열로 읽습니다.
readAsDataURL(file): 파일을 데이터 URL로 읽습니다.
readAsText(file, [encoding]): 파일을 텍스트로 읽습니다. 인코딩은 기본값입니다. 값 is '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() { $('' + this.result + '').appendTo('body'); } reader.readAsText(file); } } }로그인 후 복사
这里的this.result实际上就是reader.result,也就是读取出来的文件内容。
테스트해 보면 이 파일의 내용이 웹 페이지에 추가되는 것을 확인할 수 있습니다. 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() { $('' + this.result + '').appendTo('body'); } reader.readAsText(file); } else if(/image/w+/.test(file.type)) { reader.onload = function() { $(' ').appendTo('body'); } reader.readAsDataURL(file); } } }로그인 후 복사
실제로 input:file 컨트롤은 여러 파일 선택도 지원합니다.
이런 식으로, handlerFiles() 파일을 순회하고 처리하는 데 필요합니다.
데이터의 일부만 읽으려는 경우 File 객체에는 Blob 객체를 생성하기 위한 webkitSlice() 또는 mozSlice() 메서드도 있습니다. 이 개체는 File 개체와 동일한 방식으로 FileReader에서 읽을 수 있습니다. 이 두 메소드는 3개의 매개변수를 받습니다. 첫 번째 매개변수는 시작 위치이고, 두 번째 매개변수는 끝 위치입니다. 생략하면 세 번째 매개변수는 콘텐츠 유형입니다.
예제는 "JavaScript에서 로컬 파일 읽기"를 참조하세요.
물론 데이터를 가져오고 파일을 표시하는 것 외에도 AJAX 업로드에도 사용할 수 있습니다. 코드는 "웹 애플리케이션에서 파일 사용"을 참조하세요.
파일 저장
지원되지 않는 브라우저의 경우 BlobBuilder.js 및 FileSaver.js를 사용하여 지원을 받을 수 있습니다.
조사를 좀 하다가 비밀을 발견했습니다.
BlobBuilder는 Blob 객체를 생성할 수 있습니다. 이 Blob 개체를 URL.createObjectURL() 메서드에 전달하여 개체 URL을 가져옵니다. 그리고 이 개체 URL은 이 Blob 개체의 다운로드 주소입니다.
다운로드 주소를 얻은 후 a 요소를 생성하고 href 속성에 다운로드 주소를 할당하고 다운로드 속성에 파일 이름을 할당합니다(Chrome 14+ 지원).
그런 다음 클릭 이벤트를 생성하고 처리를 위해 a 요소에 전달하면 브라우저가 Blob 개체 다운로드를 시작합니다.
最后,用URL.revokeObjectURL()来释放这个object 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로 파일을 읽고 저장하는 방법 배우기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!