การเข้าถึงไฟล์ในเครื่องด้วย JavaScript


177

มีการจัดการไฟล์ในตัวเครื่องที่ทำด้วย JavaScript หรือไม่? ฉันกำลังมองหาวิธีการแก้ไขที่สามารถทำได้โดยไม่ต้องติดตั้งอุปกรณ์ใด ๆ Adobe AIR

โดยเฉพาะฉันต้องการอ่านเนื้อหาจากไฟล์และเขียนเนื้อหาเหล่านั้นไปยังไฟล์อื่น ณ จุดนี้ฉันไม่กังวลเกี่ยวกับการได้รับอนุญาตและฉันแค่สมมติว่าฉันมีสิทธิ์อย่างเต็มที่ในไฟล์เหล่านี้


คำตอบ:


87

หากผู้ใช้เลือกไฟล์ผ่านทาง<input type="file">คุณสามารถอ่านและกระบวนการว่าไฟล์โดยใช้ไฟล์ API

ไม่อนุญาตให้อ่านหรือเขียนไฟล์โดยพลการ มันเป็นการละเมิดกล่องทราย จากWikipedia -> Javascript -> ความปลอดภัย :

JavaScript และ DOM ให้โอกาสผู้เขียนที่เป็นอันตรายในการส่งสคริปต์เพื่อทำงานบนคอมพิวเตอร์ไคลเอนต์ผ่านทางเว็บ ผู้เขียนเบราว์เซอร์มีความเสี่ยงนี้โดยใช้ข้อ จำกัด สองข้อ ครั้งแรกสคริปต์ทำงานใน Sandbox ในการที่พวกเขาเท่านั้นที่สามารถดำเนินการที่เกี่ยวข้องกับเว็บไม่ใช่วัตถุประสงค์ทั่วไปงานเขียนโปรแกรมเช่น การสร้างไฟล์

2016 อัปเดต : การเข้าถึงระบบไฟล์โดยตรงสามารถทำได้ผ่านFilesystem APIซึ่งรองรับเฉพาะ Chrome และ Operaและอาจสิ้นสุดไม่ได้รับการใช้งานโดยเบราว์เซอร์อื่น ( ยกเว้น Edge ) สำหรับรายละเอียดดูคำตอบของเควิน


28
ประณาม. นี่มันโง่แน่นอน Javascript นั้นเป็นภาษาสคริปต์ที่ไม่เชื่อเรื่องแอปพลิเคชัน ไม่ใช่ทุกแอปพลิเคชันเป็นเว็บเบราว์เซอร์ ฉันมาที่นี่เพราะฉันสนใจเขียนสคริปต์ Photoshop เช่น แม้ว่าแอพพลิเคชั่นบางตัวจะไม่มีคลาสการเข้าถึงไฟล์ แต่ก็มีเหตุผลที่จะสร้างมาตรฐานให้กับแอพพลิเคชั่นที่เหมาะสม - เป็นคุณสมบัติมาตรฐาน แต่เป็นทางเลือกดังนั้นประสบการณ์จากแอปหนึ่งสามารถถ่ายโอนได้ สิ่งที่ฉันเรียนรู้ใน Photoshop จะไม่สามารถพกพาได้แม้แต่กับโฮสต์ Javascript อื่นที่อนุญาตการเข้าถึงไฟล์
Steve314

27
Javascript ใช้ภาษาและทำสิ่งที่สภาพแวดล้อมการโฮสต์อนุญาตให้ทำได้ SpiderMonkey สามารถทำสิ่งใดก็ได้ที่ภาษาอื่นสามารถทำได้ Javascript ในเบราว์เซอร์ถูก sandboxed

35
คำตอบนี้อาจถูกต้องเมื่อ 3 ปีก่อน แต่ก็ไม่ได้ถูกต้องอีกต่อไป ดูคำตอบของ @Horst Walter ใน HTML5 หรือไปที่นี่: html5rocks.com/th/tutorials/file/dndfiles
james.garriss

@ james.garriss ใช่จริง ๆ แล้วมันไม่ถูกต้องสุดเมื่อสามปีที่แล้ว หน้านี้สอนวิธีอ่าน / เขียนด้วย Firefox ย้อนกลับไปในปี 2003 web.archive.org/web/20031229011919/http://www.captain.at/ … (bulit สำหรับ XUL แต่มีในเบราว์เซอร์ที่มี XpCom) และ Microsoft มี node.js-style javscript shell scripting ในช่วงปี 1990 (และ FileIO มีอยู่ในเบราว์เซอร์พร้อม ActiveX)
original_username

เป็นไปไม่ได้อีกต่อไป
SysDragon

158

เพียงแค่อัปเดตฟีเจอร์ HTML5 อยู่ในhttp://www.html5rocks.com/en/tutorials/file/dndfiles/ http://www.html5rocks.com/en/tutorials/file/dndfiles/บทความที่ยอดเยี่ยมนี้จะอธิบายรายละเอียดการเข้าถึงไฟล์ภายในเครื่องใน JavaScript สรุปจากบทความที่กล่าวถึง:

ข้อมูลจำเพาะมีอินเทอร์เฟซต่าง ๆ สำหรับการเข้าถึงไฟล์จากระบบแฟ้ม 'ท้องถิ่น' :

  1. ไฟล์ - แต่ละไฟล์ จัดเตรียมข้อมูลแบบอ่านอย่างเดียวเช่นชื่อขนาดไฟล์ชนิด MIME และการอ้างอิงถึงตัวจัดการไฟล์
  2. FileList - ลำดับเหมือนอาร์เรย์ของวัตถุไฟล์ (คิด<input type="file" multiple>หรือลากไดเรกทอรีของไฟล์จากเดสก์ท็อป)
  3. Blob - อนุญาตให้แบ่งไฟล์เป็นช่วงไบต์

ดูความคิดเห็นของ Paul D. Waite ด้านล่าง


7
มันไม่ได้เป็นระบบไฟล์ที่แท้จริงเหมือนอย่างที่เรามีโดยใช้ปลั๊กอิน Java หรือ Flash ตัวอย่างเช่นเราไม่สามารถแสดงรายการไฟล์บนเดสก์ท็อปของผู้ใช้เว้นแต่เขาจะเลือกไฟล์เอง
ม้า

9
ดูเหมือนว่า API เหล่านี้จะถูกละทิ้ง: ดูw3.org/TR/file-writer-apiและ html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite

4
ระวังที่นั่นด้วยรูปแบบของ W3C เพื่อแย่งเทคโนโลยีที่มีประโยชน์ออกไป API ระบบไฟล์ที่ใช้งานใน Chrome เท่านั้นจะไม่ดำเนินการต่อ ไฟล์ API, ได้สากลสนับสนุนได้รับการยอมรับว่าเป็นร่าง W3C ทำงานและเราไม่สามารถคิดชีวิตโดยไม่ได้ แน่นอนว่าเรายังอยู่ในเบราว์เซอร์และเราต้องรอจนกว่าผู้ใช้จะนำไฟล์มาให้เรา แต่สิ่งนี้จะขยายขอบเขตการเข้าถึงแอปพลิเคชันบนเว็บอย่างรวดเร็ว
bbsimonbb

21

อัปเดตคุณลักษณะนี้จะถูกลบตั้งแต่ Firefox 17 (ดูhttps://bugzilla.mozilla.org/show_bug.cgi?id=546848 )


บน Firefox คุณ (โปรแกรมเมอร์) สามารถทำได้จากภายในไฟล์ JavaScript:

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

และคุณ (ผู้ใช้เบราว์เซอร์) จะได้รับแจ้งให้อนุญาตการเข้าถึง (สำหรับ Firefox คุณต้องทำเช่นนี้ทุกครั้งที่เบราว์เซอร์เริ่มทำงาน)

หากผู้ใช้เบราว์เซอร์เป็นบุคคลอื่นพวกเขาจะต้องให้สิทธิ์


6
สิ่งนี้ทำให้เกิดข้อผิดพลาดว่าเลิกใช้แล้วและคุณสามารถทำได้ในส่วนขยายเท่านั้นไม่ใช่เว็บไซต์จาวาสคริปต์
Esailija

4
ตามที่ลิงค์นี้แสดงให้เห็นว่าคุณสมบัตินี้ได้ถูกลบออกในเวอร์ชัน Firefox รุ่นใหม่กว่า support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
โอ้นั่นห่วย ฉันได้รับความปลอดภัยและทุกอย่างแล้ว แต่เราต้องการวิธีการให้ความไว้วางใจในการเรียกใช้ไฟล์จาวาสคริปต์ของเราในพื้นที่
Jason S

แน่ใจ และฉันยังไม่พบวิธีที่จะทำเช่นนี้อีก
Makan Tayebi

2
โปรดอัปเดตคำตอบเพื่อแสดงว่าเลิกใช้แล้ว ขอบคุณ
jpaugh

20

ดังกล่าวก่อนหน้านี้FileSystemและFile APIs พร้อมกับFileWriter API สามารถใช้ในการอ่านและเขียนไฟล์จากบริบทของแท็บ / หน้าต่างเบราว์เซอร์ไปยังเครื่องไคลเอนต์

มีหลายสิ่งที่เกี่ยวข้องกับ FileSystem และ FileWriter API ที่คุณควรระวังซึ่งบางเรื่องถูกกล่าวถึง แต่มีค่าที่ต้องทำซ้ำ:

  • ปัจจุบันการติดตั้ง API นั้นมีอยู่เฉพาะในเบราว์เซอร์ที่ใช้ Chromium (Chrome & Opera)
  • API ทั้งสองตัวถูกนำออกจากแทร็กมาตรฐาน W3C เมื่อวันที่ 24 เมษายน 2014 และ ณ ขณะนี้เป็นกรรมสิทธิ์
  • การลบ APIs (ปัจจุบันเป็นกรรมสิทธิ์) จากการใช้เบราว์เซอร์ในอนาคตเป็นไปได้
  • Sandbox (สถานที่ด้านนอกของดิสก์ไฟล์ที่สามารถผลิตไม่มีผล) ถูกนำมาใช้ในการจัดเก็บไฟล์ที่สร้างขึ้นด้วย API จะ
  • ระบบแฟ้มเสมือน (โครงสร้างไดเรกทอรีที่ไม่จำเป็นต้องอยู่บนดิสก์ในรูปแบบเดียวกับที่มันไม่เมื่อเข้าถึงได้จากภายในเบราว์เซอร์) จะใช้แทนไฟล์ที่สร้างขึ้นด้วย API จะ

นี่คือตัวอย่างง่ายๆของวิธีการใช้ 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){}
});

การใช้ไฟล์ raw, 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 APIs จะไม่อยู่ในแทร็กมาตรฐานอีกต่อไปการใช้งานของพวกเขาสามารถพิสูจน์ได้ในบางกรณีในความคิดของฉันเพราะ:

  • ความสนใจที่ต่ออายุใหม่จากผู้ขายเบราว์เซอร์ที่ไม่ใช้งานอาจทำให้พวกเขากลับมาได้ทันที
  • ส่วนแบ่งการตลาดของการใช้เบราว์เซอร์
  • Google (ผู้สนับสนุนหลักของ Chromium) ไม่ได้ให้และวันที่สิ้นสุดของ API

ไม่ว่า "บางกรณี" จะรวมอยู่ในตัวคุณเองหรือไม่

* BakedGoods ดูแลโดยไม่มีใครอื่นนอกจากเจ้านี่ตรงนี้ :)


7

NW.js ช่วยให้คุณสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้ Javascript โดยไม่มีข้อ จำกัด ด้านความปลอดภัยที่มักจะวางไว้บนเบราว์เซอร์ ดังนั้นคุณสามารถเรียกใช้ไฟล์ที่เรียกทำงานได้ด้วยฟังก์ชั่นหรือสร้าง / แก้ไข / อ่าน / เขียน / ลบไฟล์ คุณสามารถเข้าถึงฮาร์ดแวร์เช่นการใช้งาน CPU ปัจจุบันหรือ RAM ทั้งหมดที่ใช้งานอยู่เป็นต้น

คุณสามารถสร้างแอพพลิเคชั่น windows, linux หรือ mac desktop โดยไม่ต้องทำการติดตั้งใด ๆ

นี่คือกรอบงานสำหรับ NW.js, Universal GUI:


1
นอกจากนี้ยังสามารถเข้าถึงไฟล์ในเครื่องโดยใช้Electronซึ่งเป็นเฟรมเวิร์กที่คล้ายกันสำหรับแอปพลิเคชันเดสก์ทอป JavaScript
Anderson Green

6

หากคุณกำลังปรับใช้บน Windows โฮสต์สคริปต์ของ Windows จะเสนอ JScript API ที่มีประโยชน์มากให้กับระบบไฟล์และทรัพยากรในท้องถิ่นอื่น ๆ การรวมสคริปต์ WSH เข้ากับเว็บแอปพลิเคชันในพื้นที่อาจไม่สวยงามเท่าที่คุณต้องการ


3
ฉันต้องการโซลูชันที่มีระบบปฏิบัติการที่เป็นอิสระ (อย่างน้อยระหว่าง windows และ mac) ดังนั้นโฮสต์สคริปต์ windows จึงไม่พึงพอใจเว้นแต่ว่าจะมีวิธีแก้ปัญหาที่เทียบเคียงได้กับแพลตฟอร์ม Mac
Jared

5

หากคุณมีช่องป้อนข้อมูลเช่น

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

4

FSO.jsล้อมรอบ HTML5 FileSystem API ใหม่ที่ได้มาตรฐานโดย W3C และมีวิธีที่ง่ายมากในการอ่านเขียนหรือสำรวจระบบไฟล์แซนด์บ็อกซ์ในพื้นที่ เป็นแบบอะซิงโครนัสดังนั้นไฟล์ I / O จะไม่รบกวนการใช้งานของผู้ใช้ :)


1
FSO.js ไม่รองรับ IE, Mozilla หรือ Safari ในปัจจุบัน
Phillip Senn

2

หากคุณต้องการเข้าถึงระบบไฟล์ทั้งหมดในไคลเอนต์, อ่าน / เขียนไฟล์, ดูโฟลเดอร์สำหรับการเปลี่ยนแปลง, เริ่มต้นแอปพลิเคชัน, เข้ารหัสหรือเซ็นชื่อเอกสาร, ฯลฯ โปรดดูที่ JSFS

อนุญาตให้เข้าถึงได้อย่างปลอดภัยและไม่ จำกัด จากเว็บเพจของคุณไปยังแหล่งข้อมูลคอมพิวเตอร์บนไคลเอนต์โดยไม่ต้องใช้เทคโนโลยีปลั๊กอินของเบราว์เซอร์เช่น AcitveX หรือ Java Applet อย่างไรก็ตามต้องมีการติดตั้งซอฟต์แวร์ที่มีความปลอดภัย

เพื่อทำงานกับ JSFS คุณควรมีความรู้พื้นฐานในการพัฒนา Java และ Java EE (Servlets)

กรุณาหา JSFS ที่นี่: https://github.com/jsfsproject/jsfs ฟรีและได้รับอนุญาตภายใต้ GPL


1

สมมติว่าไฟล์ใด ๆ ที่อาจต้องใช้รหัส JavaScript ควรได้รับอนุญาตจากผู้ใช้โดยตรง ผู้สร้างเบราว์เซอร์ที่มีชื่อเสียงไม่อนุญาตให้เข้าถึงไฟล์ JavaScript โดยทั่วไป

แนวคิดหลักของการแก้ปัญหาคือ: รหัส JavaScript ไม่สามารถเข้าถึงไฟล์ได้โดยมี URL ในเครื่อง แต่สามารถใช้ไฟล์ได้โดยมี DataURL: ดังนั้นหากผู้ใช้เรียกดูไฟล์และเปิดไฟล์ JavaScript ควรได้รับ "DataURL" โดยตรงจาก HTML แทนที่จะได้รับ "URL"

จากนั้นเปลี่ยน DataURL เป็นไฟล์โดยใช้ฟังก์ชัน readAsDataURL และวัตถุ FileReader แหล่งที่มาและคำแนะนำที่สมบูรณ์ยิ่งขึ้นด้วยตัวอย่างที่ดีอยู่ใน:

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader


0

มีผลิตภัณฑ์ (เพื่อการค้า) คือ "localFS" ซึ่งสามารถใช้ในการอ่านและเขียนทั้งระบบไฟล์บนคอมพิวเตอร์ไคลเอนต์

ต้องติดตั้งแอป Windows ขนาดเล็กและไฟล์. js ขนาดเล็กที่รวมอยู่ในหน้าของคุณ

ในฐานะคุณลักษณะด้านความปลอดภัยการเข้าถึงระบบไฟล์สามารถ จำกัด ได้เพียงหนึ่งโฟลเดอร์และได้รับการป้องกันด้วยรหัสลับ

https://www.fathsoft.com/localfs


-4

หากคุณกำลังใช้ angularjs & aspnet / mvc เพื่อดึงไฟล์ json คุณต้องอนุญาตประเภท mime ที่ web config

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.