जावास्क्रिप्ट के साथ स्थानीय फ़ाइल का उपयोग


177

क्या स्थानीय फ़ाइल हेरफेर है जो जावास्क्रिप्ट के साथ किया गया है? मैं एक समाधान की तलाश कर रहा हूं जिसे Adobe AIR की आवश्यकता के बिना किसी भी स्थापित पदचिह्न के साथ पूरा किया जा सकता है ।

विशेष रूप से, मैं एक फ़ाइल से सामग्री को पढ़ना चाहूंगा और उन सामग्रियों को दूसरी फ़ाइल में लिखूंगा। इस बिंदु पर मैं अनुमतियाँ प्राप्त करने के बारे में चिंतित नहीं हूँ और मैं मान रहा हूँ कि मेरे पास पहले से ही इन फ़ाइलों की पूर्ण अनुमति है।


1
क्रोम XHR विशिष्ट: stackoverflow.com/questions/4819060/…
Ciro Santilli 病::: 事件

जवाबों:


87

यदि उपयोगकर्ता किसी फ़ाइल का चयन करता है <input type="file">, तो आप फ़ाइल API का उपयोग करके उस फ़ाइल को पढ़ और संसाधित कर सकते हैं

मनमाने फाइलों को पढ़ना या लिखना डिजाइन द्वारा अनुमति नहीं है। यह सैंडबॉक्स का उल्लंघन है। से विकिपीडिया -> जावास्क्रिप्ट -> सुरक्षा :

जावास्क्रिप्ट और DOM वेब के माध्यम से क्लाइंट कंप्यूटर पर चलाने के लिए स्क्रिप्ट देने के लिए दुर्भावनापूर्ण लेखकों के लिए क्षमता प्रदान करते हैं। ब्राउज़र लेखकों में दो प्रतिबंधों का उपयोग करके यह जोखिम होता है। सबसे पहले, स्क्रिप्ट एक सैंडबॉक्स में चलती हैं जिसमें वे केवल वेब-संबंधित क्रियाएं कर सकते हैं, न कि फाइलों को बनाने जैसे सामान्य-प्रयोजन प्रोग्रामिंग कार्य ।

2016 अद्यतन : फाइल सिस्टम सीधे पहुँचना के माध्यम से संभव है फ़ाइल एपीआई , जो है ही क्रोम और ओपेरा द्वारा समर्थित और कार्यान्वित नहीं किया जा रहा दूसरे ब्राउज़र द्वारा खत्म हो सकता है (के साथ एज के अपवाद )। जानकारी के लिए केविन का जवाब देखें ।


28
अरे नहीं। यह बेवकूफी है, बिल्कुल। जावास्क्रिप्ट माना जाता है कि एक अनुप्रयोग-अज्ञेय स्क्रिप्टिंग भाषा है। हर एप्लिकेशन वेब ब्राउज़र नहीं है। मैं यहाँ आया था क्योंकि मैं उदाहरण के लिए फ़ोटोशॉप की स्क्रिप्टिंग में दिलचस्पी रखता हूँ। यहां तक ​​कि अगर कुछ एप्लिकेशन फ़ाइल एक्सेस क्लासेस प्रदान नहीं करते हैं, तो यह उन अनुप्रयोगों के लिए उन्हें मानकीकृत करने के लिए समझ में आता है जहां वे उपयुक्त हैं - एक मानक लेकिन वैकल्पिक सुविधा, इसलिए एक ऐप से अनुभव सार्वभौमिक रूप से लागू नहीं होने पर भी हस्तांतरणीय है। मैं फ़ोटोशॉप में जो सीखता हूं वह अन्य जावास्क्रिप्ट होस्टों के लिए भी पोर्टेबल नहीं होगा जो फ़ाइल एक्सेस की अनुमति देता है।
स्टीव ३१

27
भाषा को जावास्क्रिप्ट करें और जो भी होस्ट करने वाला वातावरण उसे करने की अनुमति देता है। स्पाइडरमैन किसी भी अन्य भाषा में कुछ भी कर सकता है। ब्राउज़र में जावास्क्रिप्ट सैंडबॉक्स किया जाता है।

35
यह उत्तर 3 साल पहले सही हो सकता है, लेकिन यह निश्चित रूप से किसी भी लंबे समय तक सही नहीं है। HTML5 पर @Horst वाल्टर का उत्तर देखें। या यहां जाएं: html5rocks.com/en/tutorials/file/dndfiles
james.garriss

@ james.garriss हाँ, वास्तव में यह तीन साल पहले भी सुपर सही नहीं था। इस पृष्ठ ने मुझे सिखाया कि 2003 में फ़ायरफ़ॉक्स के साथ कैसे पढ़ा / लिखा जा सकता है। web.archive.org/web/20031229011919/http://www.captain.at/… (XUL के लिए bulit लेकिन XpCom के साथ ब्राउज़र में उपलब्ध) और Microsoft था 1990 के दशक में Node.js शैली Javscript शेल पटकथा लेखन (और FileIO ActiveX के साथ ब्राउज़र में उपलब्ध है)
original_username

अब संभव नहीं है
SysDragon

158

बस HTML5 सुविधाओं का एक अपडेट http://www.html5rocks.com/en/tutorials/file/dndfiles/ में है । यह उत्कृष्ट लेख जावास्क्रिप्ट में स्थानीय फ़ाइल पहुंच के बारे में विस्तार से बताएगा। उल्लिखित लेख से सारांश:

विनिर्देशन 'स्थानीय' फाइल सिस्टम से फ़ाइलों तक पहुँचने के लिए कई इंटरफेस प्रदान करता है :

  1. फ़ाइल - एक व्यक्तिगत फ़ाइल; नाम, फ़ाइल आकार, MIME प्रकार और फ़ाइल हैंडल के संदर्भ के रूप में आसानी से जानकारी प्रदान करता है।
  2. FileList - फ़ाइल ऑब्जेक्ट्स का एक सरणी-जैसा अनुक्रम। ( <input type="file" multiple>डेस्कटॉप से ​​फ़ाइलों की निर्देशिका को सोचें या खींचें)।
  3. बूँद - एक फाइल को बाइट रेंज में स्लाइस करने की अनुमति देता है।

पॉल डी। वेट की टिप्पणी नीचे देखें।


7
यह बिल्कुल सही फाइल सिस्टम नहीं है जैसे कि हमने जावा या फ्लैश प्लगइन का उपयोग किया है। उदाहरण के लिए, हम उपयोगकर्ता के डेस्कटॉप पर फ़ाइलों को तब तक सूचीबद्ध नहीं कर सकते हैं जब तक कि वह पहले उन्हें स्वयं का चयन नहीं करता है।
पचेरियर

9
इन APIs को छोड़ दिया जा रहा है: w3.org/TR/file-writer-api और html5rocks.com/en/tutorials/file/filesystem
Paul D. Waite

4
वहां सावधान, उपयोगी तकनीक छीनने के लिए W3C का फॉर्म दिया गया। केवल क्रोम में लागू किया गया फाइलसिस्टम एपी आगे नहीं बढ़ रहा है। फ़ाइल एपीआई, सार्वभौमिक है समर्थन, एक के रूप में स्वीकार किया जाता है W3C कार्यकारी ड्राफ्ट और हम अब यह बिना जीवन की कल्पना कर सकते हैं। बेशक हम अभी भी एक ब्राउज़र में हैं, और हमें इंतजार करना होगा कि उपयोगकर्ता हमें फाइल लाए, लेकिन यह नाटकीय रूप से वेब ऐप्स की पहुंच बढ़ाता है और कभी भी दूर नहीं जा रहा है।
bbsimonbb

21

अद्यतन यह सुविधा फ़ायरफ़ॉक्स 17 ( https://bugzilla.mozilla.org/show_bug.cgi?id=546848 देखें ) के बाद से हटा दी गई है ।


फ़ायरफ़ॉक्स पर आप (प्रोग्रामर) एक जावास्क्रिप्ट फ़ाइल के भीतर से ऐसा कर सकते हैं:

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

और आपको (ब्राउज़र उपयोगकर्ता) पहुंच की अनुमति देने के लिए प्रेरित किया जाएगा। (फ़ायरफ़ॉक्स के लिए आपको बस ब्राउज़र शुरू होने के बाद हर बार ऐसा करना होगा)

यदि ब्राउज़र उपयोगकर्ता कोई और है, तो उन्हें अनुमति देनी होगी।


6
यह एक त्रुटि देता है कि यह पदावनत है और आप इसे केवल एक एक्सटेंशन में कर सकते हैं, वेबसाइट जावास्क्रिप्ट पर नहीं
Esailija

4
जैसा कि इस लिंक से पता चलता है, इस फीचर को बाद के फ़ायरफ़ॉक्स संस्करणों में हटा दिया गया है। support.mozilla.org/en-US/questions/944433
Makan Tayebi

3
ओह, यह बेकार है। मुझे सुरक्षा और वह सब कुछ मिलता है, लेकिन हमें अपनी स्वयं की जावास्क्रिप्ट फ़ाइलों को स्थानीय रूप से चलाने के लिए विश्वास देने के तरीके की आवश्यकता है।
जेसन एस

ज़रूर। और मुझे अभी तक ऐसा करने का दूसरा तरीका नहीं मिला है।
मकेन तैयब

2
कृपया यह दिखाने के लिए कि यह पदावनत है का उत्तर अपडेट करें। धन्यवाद।
jpaugh

20

जैसा कि पहले उल्लेख किया गया है, FileSystem और फ़ाइल APIs, FileWriter API के साथ , ब्राउज़र टैब / विंडो के संदर्भ से क्लाइंट मशीन में फ़ाइलों को पढ़ने और लिखने के लिए उपयोग किया जा सकता है।

FileSystem और FileWriter API से संबंधित कई बातें हैं जिनके बारे में आपको जानकारी होनी चाहिए, जिनमें से कुछ का उल्लेख किया गया था, लेकिन वे दोहराने लायक हैं:

  • वर्तमान में एपीआई के कार्यान्वयन केवल क्रोमियम-आधारित ब्राउज़रों (क्रोम और ओपेरा) में मौजूद हैं
  • 24 अप्रैल 2014 को दोनों एपीआई को डब्ल्यू 3 सी मानकों के ट्रैक से हटा दिया गया था और अब तक का मालिकाना हक है
  • भविष्य में ब्राउज़रों को लागू करने से (अब मालिकाना) एपीआई को हटाने की संभावना है
  • 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);

हालांकि फ़ाइलसिस्टम और फ़ाइलविटर एपीआई अब मानक ट्रैक पर नहीं हैं, उनका उपयोग कुछ मामलों में उचित हो सकता है, मेरी राय में, क्योंकि:

  • संयुक्त राष्ट्र के लागू करने वाले ब्राउज़र विक्रेताओं से नवीनीकृत ब्याज उन्हें इस पर वापस ला सकता है
  • कार्यान्वयन (क्रोमियम-आधारित) ब्राउज़रों का बाजार प्रवेश अधिक है
  • Google (क्रोमियम का मुख्य कंट्रिब्यूटर) ने एपीआई को जीवन की तारीख और अंत नहीं दिया है

क्या "कुछ मामले" आपके खुद के होते हैं, हालांकि, आपके लिए यह तय करना है।

* BakedGoods को इस लड़के के अलावा और किसी ने यहाँ नहीं रखा है :)


7

NW.js आपको ब्राउज़र पर आमतौर पर लगाए गए सभी सुरक्षा प्रतिबंधों के बिना जावास्क्रिप्ट का उपयोग करके डेस्कटॉप एप्लिकेशन बनाने की अनुमति देता है। तो आप किसी फ़ंक्शन के साथ निष्पादन योग्य चला सकते हैं, या फ़ाइलों को बना / संपादित / पढ़ / लिख / हटा सकते हैं। आप हार्डवेयर का उपयोग कर सकते हैं, जैसे वर्तमान सीपीयू उपयोग या उपयोग में कुल रैम, आदि।

आप इसके साथ एक विंडोज़, लिनक्स, या मैक डेस्कटॉप एप्लिकेशन बना सकते हैं जिसमें किसी भी स्थापना की आवश्यकता नहीं है।

यहाँ NW.js के लिए एक रूपरेखा है, यूनिवर्सल GUI:


1
इलेक्ट्रॉन का उपयोग करके स्थानीय फ़ाइलों तक पहुंचना भी संभव है , जो जावास्क्रिप्ट डेस्कटॉप अनुप्रयोगों के लिए एक समान रूपरेखा है।
एंडरसन ग्रीन

6

यदि आप विंडोज पर तैनात हैं, तो विंडोज स्क्रिप्ट होस्ट फ़ाइल सिस्टम और अन्य स्थानीय संसाधनों के लिए एक बहुत ही उपयोगी JScript एपीआई प्रदान करता है। WSH लिपियों को एक स्थानीय वेब अनुप्रयोग में शामिल करना उतना सुरुचिपूर्ण नहीं हो सकता, जितना आप चाहें।


3
मुझे ऑस-इंडिपेंडेंट (कम से कम विंडोज़ और मैक के बीच) होने का उपाय पसंद है, इसलिए विंडोज़ स्क्रिप्ट होस्ट इसे संतुष्ट नहीं करता है, जब तक कि मैक प्लेटफ़ॉर्म के लिए एक तुलनीय समाधान नहीं है
जारेड

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 W3C द्वारा मानकीकृत किए जा रहे नए HTML5 FileSystem API को लपेटता है और एक स्थानीय सैंडबॉक्स फाइल सिस्टम से पढ़ने, लिखने या ट्रैवस करने का एक बेहद आसान तरीका प्रदान करता है। यह अतुल्यकालिक है, इसलिए फ़ाइल I / O उपयोगकर्ता के अनुभव में हस्तक्षेप नहीं करेगा। :)


1
FSO.js वर्तमान में IE, मोज़िला या सफारी द्वारा समर्थित नहीं है।
फिलिप सेन 15

2

यदि आपको क्लाइंट पर संपूर्ण फ़ाइल सिस्टम तक पहुंचने, फ़ाइलों को पढ़ने / लिखने, परिवर्तनों के लिए फ़ोल्डर देखने, एप्लिकेशन शुरू करने, एन्क्रिप्ट करने या हस्ताक्षर करने आदि की आवश्यकता है, तो कृपया JSFS पर एक नज़र डालें।

यह AcitveX या Java Applet जैसी ब्राउज़र प्लगइन तकनीक का उपयोग किए बिना क्लाइंट पर कंप्यूटर संसाधनों के लिए आपके वेब पेज से सुरक्षित और असीमित पहुंच की अनुमति देता है। हालाँकि, सॉफ़्टवेयर की शांति भी स्थापित करनी होगी।

JSFS के साथ काम करने के लिए आपको जावा और जावा ईई विकास (सर्वलेट्स) में बुनियादी ज्ञान होना चाहिए।

JSFS यहाँ मिल करें: https://github.com/jsfsproject/jsfs । यह GPL के अंतर्गत निःशुल्क और लाइसेंस प्राप्त है


1

यह मानते हुए कि जावास्क्रिप्ट कोड को किसी भी फाइल की आवश्यकता हो सकती है, सीधे उपयोगकर्ता द्वारा अनुमति दी जानी चाहिए। प्रसिद्ध ब्राउज़रों के निर्माता आम तौर पर जावास्क्रिप्ट एक्सेस फ़ाइलों को अनुमति नहीं देते हैं।

समाधान का मुख्य विचार यह है: जावास्क्रिप्ट कोड अपने स्थानीय URL होने से फ़ाइल तक नहीं पहुंच सकता है। लेकिन यह फ़ाइल को अपने DataURL के द्वारा उपयोग कर सकता है: इसलिए यदि उपयोगकर्ता किसी फ़ाइल को ब्राउज़ करता है और उसे खोलता है, तो जावास्क्रिप्ट को "URL" प्राप्त करने के बजाय सीधे HTML से "DataURL" प्राप्त करना चाहिए।

फिर यह रीडएर्सडेटाएलएल फंक्शन और फाइलरएडर ऑब्जेक्ट का उपयोग करके डेटाएलएल को एक फाइल में बदल देता है। स्रोत और एक अच्छा उदाहरण के साथ एक अधिक पूर्ण गाइड में हैं:

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


0

एक व्यावसायिक (वाणिज्यिक) उत्पाद है, "लोकल एफएस" जिसका उपयोग क्लाइंट कंप्यूटर पर संपूर्ण फाइल-सिस्टम को पढ़ने और लिखने के लिए किया जा सकता है।

छोटा विंडोज ऐप इंस्टॉल होना चाहिए और आपके पेज में शामिल .js फ़ाइल।

एक सुरक्षा सुविधा के रूप में, फ़ाइल-सिस्टम एक्सेस को एक फ़ोल्डर तक सीमित किया जा सकता है और गुप्त-कुंजी के साथ संरक्षित किया जा सकता है।

https://www.fathsoft.com/localfs


-4

यदि आप json फ़ाइलों को पुनः प्राप्त करने के लिए angularjs और aspnet / mvc का उपयोग कर रहे हैं, तो आपको वेब ब्राउज़र पर माइम प्रकार की अनुमति देनी होगी

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.