javascriptセクションでは、JavaScriptを使用してファイルを読み取って保存する方法を紹介します。
関連する無料学習の推奨事項:javascript(ビデオ)
Googleはプラグインデータを同期する機能をまだ提供していないため、プラグイン構成をインポートおよびエクスポートするにはファイルを処理する必要があります。セキュリティ上の理由から、ファイルにアクセスするためのAPIを提供しているのはIEだけですが、HTML 5の登場により、他のブラウザーもそれをサポートしています。
まず、ファイルの読み取りについて説明しましょう。W3CはいくつかのファイルAPIを提供しますが、その中で最も重要なのはFileReaderクラスです。
まず、使用する必要のあるHTMLタグをリストします。
ファイルが選択されていません
ファイルが選択されると、ファイルを含むリスト(FileListオブジェクト)がパラメーターとしてhandleFiles()関数に渡されます。
このFileListオブジェクトは配列に似ており、ファイルの数を知ることができ、その要素はFileオブジェクトです。
このFileオブジェクトから、name、size、lastModifiedDate、typeなどの属性を取得できます。
このFileオブジェクトをFileReaderオブジェクトのreadingメソッドに渡すと、ファイルを読み取ることができます。
FileReaderには4つの読み取り方法があります。
readAsArrayBuffer(file):ファイルをArrayBufferとして読み取ります。
readAsBinaryString(file):ファイルをバイナリ文字列として読み取ります
readAsDataURL(file):ファイルをデータURLとして読み取ります
readAsText(file、[encoding]):ファイルをテキストとして読み取ります。デフォルトのエンコーディングは「UTF-8」です。
さらに、abort()メソッドはファイルの読み取りを停止できます。
FileReaderオブジェクトがファイルを読み取った後、それを処理する必要があります。現在のスレッドをブロックしないために、APIはイベントモデルを使用してこれらのイベントを登録します。
onabort:中断されたときにトリガーされます
onerror:エラーが発生したときにトリガーされます
onload:ファイルが正常に読み取られたときにトリガーされます
onloadend:失敗したかどうかに関係なく、ファイルが読み取られたときにトリガーされます
onloadstart:ファイルの読み取りが開始されたときにトリガーされます
onprogress:ファイルが読み取られたときに定期的にトリガーします
これらの方法を使用すると、ファイルを処理できます。
ファイルの
読み取り最初にテキストファイルを読み取ってみましょう。
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text/w+/.test(file.type)) {
reader.onload = function() {
$('
' + this.result + '
').appendTo('body');
}
reader.readAsText(file);
}
}
}
ここでのThis.resultは、実際にはreader.resultであり、読み取られたファイルの内容です。
テストすると、このファイルのコンテンツがWebページに追加されていることがわかります。Chromeを使用している場合は、サーバーまたはプラグインにWebページを配置する必要があります。そうしないと、ファイルプロトコルで失敗します。
ブラウザはデータURIプロトコルの画像を直接表示できるため、画像をもう一度試してみましょう。今回は画像を追加します。
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text/w+/.test(file.type)) {
reader.onload = function() {
$('
' + this.result + '
').appendTo('body');
}
reader.readAsText(file);
} else if(/image/w+/.test(file.type)) {
reader.onload = function() {
$('').appendTo('body');
}
reader.readAsDataURL(file);
}
}
}
実際、input:fileコントロールは、複数のファイルの選択もサポートしています。
ファイルが選択されていません
このように、handleFiles()はファイルをトラバースして処理する必要があります。
データの一部のみを読み取りたい場合は、FileオブジェクトにBlobオブジェクトを生成するためのwebkitSlice()またはmozSlice()メソッドもあります。このオブジェクトは、Fileオブジェクトと同様にFileReaderで読み取ることができます。これらの2つのメソッドは、3つのパラメーターを受け取ります。最初のパラメーターは開始位置です。2番目は終了位置です。省略した場合、ファイルの最後まで読み取ります。3番目はコンテンツタイプです。
例については、「JavaScriptでローカルファイルを読み取る」を参照してください。
もちろん、データのインポートとファイルの表示に加えて、AJAXアップロードにも使用できます。コードは「Webアプリケーションからのファイルの使用」を参照できます。
ファイルの保存
実際、File API:Writerは4つのインターフェースを提供しますが、現在、一部のブラウザー(Chrome8以降およびFirefox4以降)のみがBlobBuilderを実装しており、他のインターフェースは使用できません。
サポートされていないブラウザーの場合は、BlobBuilder.jsとFileSaver.jsを使用してサポートを受けることができます。
調べて謎を発見しました。
BlobBuilderはBlobオブジェクトを作成できます。このBlobオブジェクトをURL.createObjectURL()メソッドに渡すと、オブジェクトのURLを取得できます。そして、このオブジェクトURLは、このBlobオブジェクトのダウンロードアドレスです。
ダウンロードアドレスを取得したら、要素を作成し、ダウンロードアドレスをhref属性に割り当て、ファイル名をダウンロード属性に割り当てます(Chrome 14以降のサポート)。
次に、クリックイベントを作成し、それを処理する要素に渡します。これにより、ブラウザーはBlobオブジェクトのダウンロードを開始します。
最後に、URL.revokeObjectURL()を使用してオブジェクトURLを解放します。これにより、このファイルを引き続き参照する必要がないことがブラウザーに通知されます。
簡略化されたコードは次のとおりです。
var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) { // 强制下载,而非在浏览器中打开
var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
}
var url = URL.createObjectURL(blob);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);
}
var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');
テスト時に、テキストファイルを保存するように求められます。Chromeは、ウェブページをサーバーまたはプラグインに配置する必要があります。
添付:文書作成ツール(乾物)
/**
* 写文件
* @param fileName 文件名
* @param data 文件流
* @param path 写入路径
* @return boolean
*/
public static boolean writeFile(String fileName,String data,String path) {
try {
// System.out.println("fileContent:" + data);
File file = new File(path + fileName);
if(!file.exists()){
file.createNewFile();
}
FileOutputStream outStream = new FileOutputStream(file);
outStream.write(data.getBytes());
outStream.flush();
outStream.close();
outStream = null;
return(true);
} catch (Exception e) {
e.printStackTrace();
return(false);
}
}
この記事はphp中国語のウェブサイトから来ています:javascript列https://www.php.cn/course/list/17.html