JavaScriptで行われたローカルファイル操作はありますか?Adobe AIRを必要とするようなインストールフットプリントなしで実行できるソリューションを探しています。
具体的には、ファイルからコンテンツを読み取り、それらのコンテンツを別のファイルに書き込みます。この時点では、権限の取得について心配していませんが、これらのファイルに対する完全な権限をすでに持っていると想定しています。
JavaScriptで行われたローカルファイル操作はありますか?Adobe AIRを必要とするようなインストールフットプリントなしで実行できるソリューションを探しています。
具体的には、ファイルからコンテンツを読み取り、それらのコンテンツを別のファイルに書き込みます。この時点では、権限の取得について心配していませんが、これらのファイルに対する完全な権限をすでに持っていると想定しています。
回答:
ユーザーがを介してファイルを選択した場合、File APIを使用してそのファイルを読み取り、処理<input type="file">
できます。
設計により、任意のファイルの読み取りまたは書き込みは許可されていません。これはサンドボックスの違反です。ウィキペディアから-> Javascript->セキュリティ:
JavaScriptとDOMは、悪意のある作成者がWeb経由でクライアントコンピューターで実行するスクリプトを配信する可能性を提供します。ブラウザ作成者は、2つの制限を使用してこのリスクを抑制します。まず、スクリプトはサンドボックス内で実行され、ファイルの作成などの汎用プログラミングタスクではなく、Web関連のアクションのみを実行 できます。
2016 UPDATE:直接ファイルシステムへのアクセスを介して可能であるファイルシステムAPIされ、唯一のクロム、オペラによって支持および他のブラウザによって実装されていない終わることがあり(とエッジを除きます)。詳細については、ケビンの回答を参照してください。
HTML5機能のアップデートはhttp://www.html5rocks.com/en/tutorials/file/dndfiles/にあります。この優れた記事では、JavaScriptでのローカルファイルアクセスについて詳しく説明します。上記の記事の要約:
この仕様は、「ローカル」ファイルシステムからファイルにアクセスするためのいくつかのインターフェースを提供します。
<input type="file" multiple>
デスクトップからファイルのディレクトリを考えるか、ドラッグしてください)。以下のPaul D. Waiteのコメントを参照してください。
更新この機能はFirefox 17以降では削除されています(https://bugzilla.mozilla.org/show_bug.cgi?id=546848を参照)。
Firefoxでは、あなた(プログラマー)がJavaScriptファイル内からこれを行うことができます:
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
そして、あなた(ブラウザユーザー)はアクセスを許可するように促されます。(Firefoxの場合は、ブラウザを起動するたびにこれを行う必要があります)
ブラウザのユーザーが他の誰かである場合、彼らは許可を与える必要があります。
前述のように、FileSystem API とFile APIは、FileWriter API とともに、ブラウザのタブ/ウィンドウのコンテキストからクライアントマシンへのファイルの読み取りと書き込みに使用できます。
FileSystem APIとFileWriter 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){}
});
未加工のFile、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 APIとFileWriter APIは標準トラックには含まれていませんが、私の意見では、これらの使用は正当化できる場合があります。理由は次のとおりです。
「いくつかのケース」があなた自身のケースを包含するかどうかは、しかし、あなたが決めることです。
* BakedGoodsは、この男以外の誰もがここで管理しています:)
NW.jsを使用すると、通常ブラウザに課されるすべてのセキュリティ制限なしに、JavaScriptを使用してデスクトップアプリケーションを作成できます。したがって、関数を使用して実行可能ファイルを実行したり、ファイルを作成/編集/読み取り/書き込み/削除したりできます。現在のCPU使用率や使用中の合計RAMなどのハードウェアにアクセスできます。
インストールが不要なWindows、Linux、Macデスクトップアプリケーションを作成できます。
以下は、ユニバーサルGUIであるNW.jsのフレームワークです。
Windowsにデプロイする場合、Windowsスクリプトホストは、ファイルシステムやその他のローカルリソースに非常に役立つJScript APIを提供します。ただし、WSHスクリプトをローカルWebアプリケーションに組み込むと、思ったほど洗練されない場合があります。
次のような入力フィールドがある場合
<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アプレットなどのブラウザープラグインテクノロジーを使用せずに、Webページからクライアント上のコンピューターリソースへの安全で無制限のアクセスを可能にします。ただし、ソフトウェアのピースもインストールする必要があります。
JSFSを使用するには、JavaおよびJava EE開発(サーブレット)に関する基本的な知識が必要です。
JSFSはhttps://github.com/jsfsproject/jsfsで見つけてください。それは無料で、GPLの下でライセンスされています
JavaScriptコードが必要とする可能性のあるファイルはすべて、ユーザーが直接許可する必要があると想定しています。有名なブラウザーの作成者は、JavaScriptが一般的にファイルにアクセスすることを許可していません。
ソリューションの主なアイデアは、JavaScriptコードがローカルURLを使用してファイルにアクセスできないことです。ただし、DataURLを持つことでファイルを使用できます。つまり、ユーザーがファイルを参照して開く場合、JavaScriptは「URL」を取得する代わりにHTMLから「DataURL」を直接取得する必要があります。
次に、readAsDataURL関数とFileReaderオブジェクトを使用して、DataURLをファイルに変換します。ソースと素敵な例を含むより完全なガイドは次のとおりです。
クライアントコンピュータ上のファイルシステム全体を読み書きするために使用できる(商用)製品「localFS」があります。
小さなWindowsアプリをインストールし、ページに小さな.jsファイルを含める必要があります。
セキュリティ機能として、ファイルシステムへのアクセスを1つのフォルダーに制限し、秘密鍵で保護することができます。
angularjs&aspnet / mvcを使用している場合、jsonファイルを取得するには、Web設定でMIMEタイプを許可する必要があります
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>