자바스크립트로 로컬 파일 접근
자바스크립트로 진행된 로컬 파일 조작이 있습니까?Adobe AIR을 필요로 하는 것처럼 설치 공간 없이 달성할 수 있는 솔루션을 찾고 있습니다.
구체적으로는 파일에서 내용을 읽고 그 내용을 다른 파일에 쓰고 싶습니다.이 시점에서 저는 권한을 얻는 것에 대해 걱정하지 않고 이 파일들에 대한 전체 권한을 이미 가지고 있다고 가정하고 있습니다.
HTML5 기능의 업데이트는 http://www.html5rocks.com/en/tutorials/file/dndfiles/ 에 있습니다.이 훌륭한 기사는 자바스크립트의 로컬 파일 접근에 대해 자세히 설명할 것입니다.언급된 기사의 요약:
이 규격은 '로컬' 파일 시스템에서 파일에 접근하기 위한 몇 가지 인터페이스를 제공합니다.
- 파일 - 개별 파일. 이름, 파일 크기, MIME 유형 및 파일 핸들에 대한 참조와 같은 읽기 전용 정보를 제공합니다.
- FileList - 파일 개체의 배열과 유사한 시퀀스입니다.(생각하기)
<input type="file" multiple>데스크톱에서 파일 디렉토리를 끌어오기도 합니다. - Blob - 파일을 바이트 범위로 자를 수 있습니다.
폴 D를 만나보세요.이하 Wait의 코멘트.
사용자가 다음을 통해 파일을 선택하는 경우<input type="file">, 파일 API를 사용하여 해당 파일을 읽고 처리할 수 있습니다.
임의 파일을 읽거나 쓸 수 없습니다.샌드박스 위반입니다.위키백과 -> 자바스크립트 -> 보안:
JavaScript 및 DOM은 악의적인 작성자가 웹을 통해 클라이언트 컴퓨터에서 실행할 스크립트를 전달할 수 있는 가능성을 제공합니다.브라우저 작성자는 두 가지 제한을 사용하여 이 위험을 포함합니다.첫째, 스크립트는 파일 생성과 같은 범용 프로그래밍 작업이 아닌 웹 관련 작업만 수행할 수 있는 샌드박스에서 실행됩니다.
2016 업데이트: 파일 시스템 API를 통해 파일 시스템에 직접 액세스할 수 있습니다. 파일 시스템 API는 Chrome과 Opera에서만 지원되며 다른 브라우저(Edge 제외)에서는 구현되지 않을 수 있습니다.자세한 내용은 케빈의 답변을 참고하세요.
업데이트 이 기능은 Firefox 17 이후로 제거되었습니다(https://bugzilla.mozilla.org/show_bug.cgi?id=546848) 참조).
파이어폭스에서 당신(프로그래머)은 자바스크립트 파일 내에서 다음과 같은 작업을 할 수 있습니다.
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
사용자(브라우저 사용자)에게 액세스를 허용하라는 메시지가 나타납니다. (Firefox의 경우 브라우저를 시작할 때마다 한 번만 이 작업을 수행하면 됩니다.)
브라우저 사용자가 다른 사용자일 경우 사용 권한을 부여해야 합니다.
앞서 언급한 바와 같이 FileSystem 및 File API와 FileWriter API를 사용하여 브라우저 탭/윈도우의 컨텍스트에서 클라이언트 시스템으로 파일을 읽고 쓸 수 있습니다.
FileSystem 및 FileWriter API와 관련된 몇 가지 사항이 있으며, 그 중 일부는 언급되었지만 반복할 가치가 있습니다.
- API의 구현은 현재 Chrome 기반 브라우저(Chrome & Opera)에만 존재합니다.
- 두 API 모두 2014년 4월 24일 W3C 표준 트랙에서 삭제되었으며, 현재 소유하고 있습니다.
- 향후 브라우저 구현에서 (현재 독점적인) API를 제거할 가능성이 있습니다.
- sandbox(파일이 아무런 영향을 미치지 않는 디스크 외부의 위치)는 API로 작성된 파일을 저장하는 데 사용됩니다.
- 가상 파일 시스템(브라우저 내에서 액세스할 때와 동일한 형태로 디스크에 반드시 존재하지 않는 디렉토리 구조)이 API로 작성된 파일을 나타냅니다.
다음은 API가 직간접적으로 어떻게 사용되는지를 보여주는 간단한 예입니다.
베이크드 굿즈*
파일 쓰기:
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
파일 읽기:
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
원시 파일, FileWriter 및 FileSystem API 사용
파일 쓰기:
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
파일 읽기:
function onQuotaRequestSuccess(grantedQuota)
{
function getfile(directoryEntry)
{
function readFile(fileEntry)
{
function read(file)
{
var fileReader = new FileReader();
fileReader.onload = function(){var fileData = fileReader.result};
fileReader.readAsText(file);
}
fileEntry.file(read);
}
directoryEntry.getFile(
"testFile",
{create: false},
readFile
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
FileSystem과 FileWriter API는 더 이상 표준 트랙에 있지 않지만, 다음과 같은 이유로 사용이 정당화될 수 있다고 생각합니다.
- 구현되지 않은 브라우저 공급업체의 관심이 다시 고조되면 바로 이를 활용할 수 있습니다.
- 구현(Chromium 기반) 브라우저의 시장 보급률이 높음
- Google(Chrome의 주요 기여자)은 API에 대한 수명 종료 날짜를 지정하지 않았습니다.
그러나 "일부 경우"가 자신의 경우를 포함하는지 여부는 당신이 결정해야 합니다.
*Baked Goods는 바로 여기 있는 이 남자가 유지합니다 :)
NW.js를 사용하면 일반적으로 브라우저에 있는 모든 보안 제한 없이 자바스크립트를 사용하여 데스크톱 애플리케이션을 만들 수 있습니다.함수로 실행 파일을 실행하거나, 파일을 생성/편집/읽기/쓰기/삭제할 수 있습니다.현재 CPU 사용량이나 총 램 사용량 등 하드웨어에 접근할 수 있습니다.
설치할 필요가 없는 윈도우, 리눅스 또는 맥 데스크톱 응용프로그램을 만들 수 있습니다.
Windows에서 배포하는 경우 Windows Script Host는 파일 시스템 및 기타 로컬 리소스에 매우 유용한 JScript API를 제공합니다.그러나 WSH 스크립트를 로컬 웹 응용 프로그램에 통합하는 것은 원하는 만큼 우아하지 않을 수 있습니다.
다음과 같은 입력 필드가 있는 경우
<input type="file" id="file" name="file" onchange="add(event)"/>
컨텐츠를 BLOB 형식으로 파일할 수 있습니다.
function add(event){
var userFile = document.getElementById('file');
userFile.src = URL.createObjectURL(event.target.files[0]);
var data = userFile.src;
}
FSO.js는 W3C에 의해 표준화되고 있는 새로운 HTML5 FileSystem API를 랩핑하고 로컬 샌드박스된 파일 시스템에서 읽거나, 쓰거나, 이동하는 매우 쉬운 방법을 제공합니다.비동기식이므로 파일 I/O가 사용자 경험에 방해가 되지 않습니다.:)
클라이언트의 전체 파일 시스템에 대한 접근, 파일 읽기/쓰기, 폴더의 변경사항 보기, 응용프로그램 시작, 문서 암호화 또는 서명 등이 필요한 경우 JSFS를 살펴보시기 바랍니다.
AcitveX나 Java 애플릿과 같은 브라우저 플러그인 기술을 사용하지 않고 웹 페이지에서 클라이언트의 컴퓨터 리소스로 안전하고 무제한으로 액세스할 수 있습니다.그러나 소프트웨어의 평화도 설치되어야 합니다.
JSFS를 사용하기 위해서는 Java 및 Java EE 개발(Servlets)에 대한 기본적인 지식이 있어야 합니다.
JSFS는 여기 https://github.com/jsfsproject/jsfs 에서 찾아주세요.GPL에 따라 무료로 라이센스가 부여됩니다.
클라이언트 컴퓨터에서 전체 파일 시스템을 읽고 쓰는 데 사용할 수 있는 (상업용) 제품인 "localFS"가 있습니다.
작은 Windows 앱이 설치되어 있고 페이지에 작은 .js 파일이 포함되어 있어야 합니다.
보안 기능으로 파일 시스템 액세스는 하나의 폴더로 제한될 수 있으며 비밀 키를 사용하여 보호할 수 있습니다.
https://www.fathsoft.com/localfs
자바스크립트 코드가 필요할 수 있는 모든 파일은 사용자가 직접 허용해야 한다고 가정합니다.유명한 브라우저의 제작자들은 일반적으로 자바스크립트가 파일에 접근하지 못하게 합니다.
해결책의 주요 아이디어는 자바스크립트 코드가 로컬 URL을 가지고 파일에 접근할 수 없다는 것입니다. 그러나 데이터를 가지고 파일을 사용할 수 있습니다.URL: 따라서 사용자가 파일을 검색하여 열면, 자바스크립트는 "URL"을 얻는 대신 HTML에서 "DataURL"을 직접 가져와야 합니다.
그러면 데이터가 바뀝니다.readAsData를 사용하여 파일에 URL 입력URL 함수 및 FileReader 개체입니다.출처 및 보다 완벽한 안내서와 좋은 예는 다음과 같습니다.
아무도 이것에 대해 언급하지 않았기 때문에 나는 이것에 대해 언급하고 있을 뿐입니다.기본 파일 시스템을 조작할 수 있는 프로그래밍 언어가 없습니다.모든 프로그래밍 언어는 이러한 작업을 실제로 수행하기 위해 OS 인터럽트에 의존합니다.브라우저에서 실행되는 자바스크립트에는 이러한 인터럽트를 지원하기 위해 브라우저가 구현되지 않는 한 일반적으로 파일 시스템 액세스를 허용하지 않는 브라우저 "인터럽트"만 있습니다.
자바스크립트를 이용하여 파일 시스템에 접근할 수 있는 확실한 방법은 Node.js를 사용하는 것인데, Node.js는 기본 OS와 직접 상호 작용할 수 있는 기능을 가지고 있습니다.
자바스크립트에서 새로운 파일시스템 API로 작업해야 합니다.
window.showSaveFilePicker - 사용자 컴퓨터에 파일을 저장할 수 있습니다. 그러면 파일을 읽고 쓸 수 있습니다.
window.showOpenFilePicker - 사용자 컴퓨터에서 기존 파일을 열 수 있으며 이 파일을 읽고 쓸 수 있습니다.
window.showDirectoryPicker - 디렉토리에 대한 액세스 권한을 제공하고, 디렉토리에 읽고 쓸 수 있습니다.
https://fjolt.com/article/javascript-new-file-system-api 에서 튜토리얼을 확인합니다.
angularjs & aspnet/mvc를 사용하는 경우 json 파일을 검색하려면 웹 구성에서 mime type을 허용해야 합니다.
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
언급URL : https://stackoverflow.com/questions/371875/local-file-access-with-javascript
'bestsource' 카테고리의 다른 글
| C에서 순환 리스트(ring buffer)를 어떻게 구현합니까? (0) | 2023.11.05 |
|---|---|
| 보안 향상을 위해 로컬 호스트에서 MySQL 연결 제한 (0) | 2023.11.05 |
| EVOPdf, WebAPI 및 AngularJS를 사용하여 PDF 생성 (0) | 2023.11.05 |
| Mysql 8 원격 액세스 (0) | 2023.11.05 |
| scanf를 사용하여 std:: 문자열로 읽습니다. (0) | 2023.11.05 |