Programing

JavaScript를 사용하여 파일을 읽고 쓰는 방법?

lottogame 2020. 5. 27. 07:33
반응형

JavaScript를 사용하여 파일을 읽고 쓰는 방법?


누구나 JavaScript를 사용하여 파일을 읽고 쓰는 샘플 코드를 줄 수 있습니까?


완벽을 기하기 위해 OP는 브라우저 에서이 작업을 수행하려고한다고 명시하지 않습니다 (명시 된 것처럼 일반적으로 불가능합니다)

그러나 자바 스크립트 자체가이를 허용합니다. 서버 측 자바 스크립트로 수행 할 수 있습니다.

Javascript File 클래스 에서이 설명서를 참조하십시오.

편집 : 그 링크는 이제 Oracle에 의해 옮겨진 Sun 문서에 대한 링크였습니다.

시간을 지키기 위해 FileSystem 클래스에 대한 node.js 문서가 있습니다. http://nodejs.org/docs/latest/api/fs.html

편집 (2) : HTML5를 사용하여 클라이언트 측에서 파일을 읽을 수 있습니다 : http://www.html5rocks.com/en/tutorials/file/dndfiles/


아니요. 브라우저 측 자바 스크립트는 많은 보안 옵션을 비활성화하지 않고 클라이언트 컴퓨터에 쓸 수있는 권한이 없습니다.


미래가 여기 있습니다! 제안은 완성에 가까워지고 더 이상 ActiveX 또는 플래시 또는 Java가 아닙니다. 이제 우리는 사용할 수 있습니다 :

끌어서 놓기를 사용하여 파일을 브라우저로 가져 오거나 간단한 업로드 컨트롤을 사용할 수 있습니다. 사용자가 파일을 선택하면 Javascript를 통해 읽을 수 있습니다. http://www.html5rocks.com/en/tutorials/file/dndfiles/


다음은 모질라 제안입니다

http://www-archive.mozilla.org/js/js-file-object.html

이것은 Spidermonkey와 Adobe의 extendscript에서 컴파일 스위치로 구현됩니다. 또한 Firefox 확장자로 File 객체를 얻습니다.

코뿔소에는 (소설적인) readFile 기능이 있습니다 https://developer.mozilla.org/en/Rhino_Shell

rhino에서보다 복잡한 파일 조작을 위해 java.io.File 메소드를 사용할 수 있습니다.

당신은 브라우저 에서이 물건을 얻지 못할 것입니다. 브라우저에서 유사한 기능을 수행하려면 HTML5, 클라이언트 측 지속성, 쿠키 및 플래시 스토리지 오브젝트의 SQL 데이터베이스 기능을 사용할 수 있습니다.


이 Javascript 기능은 브라우저를 통해이를 실행하는 사용자에게 완전한 "다른 이름으로 저장"대화 상자를 제공합니다. 사용자가 OK를 누르면 파일이 저장됩니다.

편집 : 다음 코드는 Firefox 및 Chrome 에서이 코드를 보안 문제로 간주하여 작동하지 못하도록 IE 브라우저에서만 작동합니다.

// content is the data you'll write to file<br/>
// filename is the filename<br/>
// what I did is use iFrame as a buffer, fill it up with text
function save_content_to_file(content, filename)
{
    var dlg = false;
    with(document){
     ir=createElement('iframe');
     ir.id='ifr';
     ir.location='about.blank';
     ir.style.display='none';
     body.appendChild(ir);
      with(getElementById('ifr').contentWindow.document){
           open("text/plain", "replace");
           charset = "utf-8";
           write(content);
           close();
           document.charset = "utf-8";
           dlg = execCommand('SaveAs', false, filename+'.txt');
       }
       body.removeChild(ir);
     }
    return dlg;
}

함수를 호출하십시오.

save_content_to_file("Hello", "C:\\test");

JScript (Microsoft의 Javascript)를 사용하여 WSH (브라우저에서는 아님)를 사용하여 로컬 스크립팅을 수행하는 Scripting.FileSystemObject경우 파일 시스템에 액세스 할 수 있습니다 .

많은 보안 설정을 끄면 IE에서 동일한 객체에 액세스 할 수 있다고 생각하지만 이는 매우 나쁜 생각입니다.

여기 MSDN


현재 File , FileWriterFileSystem API 를 사용하여 브라우저 탭 / 창의 컨텍스트에서 파일을 읽고 읽을 수 있지만 사용에 대한주의 사항이 있습니다 (이 답변의 꼬리 부분 참조).

그러나 귀하의 질문에 대답하려면 :

BakedGoods 사용 *

파일 쓰기 :

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);

바로 당신이 뭘 바랐나요? 그럴 수도 있고 아닐 수도 있고. 후자의 두 API :

  • Are currently only implemented in Chromium-based browsers (Chrome & Opera)
  • Have been taken off the W3C standards track, and as of now are proprietary APIs
  • May be removed from the implementing browsers in the future
  • Constrict the creation of files to a sandbox (a location outside of which the files can produce no effect) on disk

Additionally, the FileSystem spec defines no guidelines on how directory structures are to appear on disk. In Chromium-based browsers for example, the sandbox has a virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser), within which the directories and files created with the APIs are placed.

So though you may be able to write files to a system with the APIs, locating the files without the APIs (well, without the FileSystem API) could be a non-trivial affair.

If you can deal with these issues/limitations, these APIs are pretty much the only native way to do what you've asked.

If you're open to non-native solutions, Silverlight also allows for file i/o from a tab/window contest through IsolatedStorage. However, managed code is required to utilize this facility; a solution which requires writing such code is beyond the scope of this question.

Of course, a solution which makes use of complementary managed code, leaving one with only Javascript to write, is well within the scope of this question ;) :

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoods is a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native, and some non-native storage facilities. It is maintained by this guy right here : ) .


For Firefox:

var file = Components.classes["@mozilla.org/file/local;1"].
       createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");

See https://developer.mozilla.org/en-US/docs/Code_snippets/File_I_O

For others, check out the TiddlyWiki app to see how it does it.


In the context of browser, Javascript can READ user-specified file. See Eric Bidelman's blog for detail about reading file using File API. However, it is not possible for browser-based Javascript to WRITE the file system of local computer without disabling some security settings because it is regarded as a security threat for any website to change your local file system arbitrarily.

Saying that, there are some ways to work around it depending what you are trying to do:

  1. If it is your own site, you can embed a Java Applet in the web page. However, the visitor has to install Java on local machine and will be alerted about the security risk. The visitor has to allow the applet to be loaded. An Java Applet is like an executable software that has complete access to the local computer.

  2. Chrome supports a file system which is a sandboxed portion of the local file system. See this page for details. This provides possibly for you to temporarily save things locally. However, this is not supported by other browsers.

  3. If you are not limited to browser, Node.js has a complete file system interface. See here for its file system documentation. Note that Node.js can run not only on servers, but also any client computer including windows. The javascript test runner Karma is based on Node.js. If you just like to program in javascript on the local computer, this is an option.


You'll have to turn to Flash, Java or Silverlight. In the case of Silverlight, you'll be looking at Isolated Storage. That will get you write to files in your own playground on the users disk. It won't let you write outside of your playground though.


To create file try

function makefile(){
  var fso;
  var thefile;

    fso = new ActiveXObject("Scripting.FileSystemObject");
    thefile=fso.CreateTextFile("C:\\tmp\\MyFile.txt",true);

    thefile.close()
    }

Create your directory in the C drive because windows has security against writing from web e.g create folder named "tmp" in C drive.


You can't do this in any cross-browser way. IE does have methods to enable "trusted" applications to use ActiveX objects to read/write files, but that is it unfortunately.

If you are looking to save user information, you will most likely need to use cookies.


From a ReactJS test, the following code successfully writes a file:

import writeJsonFile from 'write-json-file';

const ans = 42;
writeJsonFile('answer.txt', ans);

const json = {"answer": ans};
writeJsonFile('answer_json.txt', json);

The file is written to the directory containing the tests, so writing to an actual JSON file '*.json' creates a loop!


You cannot do file i/o on the client side using javascript as that would be a security risk. You'd either have to get them to download and run an exe, or if the file is on your server, use AJAX and a server-side language such as PHP to do the i/o on serverside


There are two ways to read and write a file using JavaScript

  1. Using JavaScript extensions

  2. Using a web page and Active X objects


Here is write solution for chrome v52+ (user still need to select a destination doe...)
source: StreamSaver.js

<!-- load StreamSaver.js before streams polyfill to detect support -->
<script src="StreamSaver.js"></script>
<script src="https://wzrd.in/standalone/web-streams-polyfill@latest"></script>
const writeStream = streamSaver.createWriteStream('filename.txt')
const encoder = new TextEncoder
let data = 'a'.repeat(1024)
let uint8array = encoder.encode(data + "\n\n")

writeStream.write(uint8array) // must be uInt8array
writeStream.close()

Best suited for writing large data generated on client side.
Otherwise I suggest using FileSaver.js to save Blob/Files

참고URL : https://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript

반응형