インタラクティブなファイル入力要素を使用せずに、ファイルを Base64 エンコーディングに変換する JavaScript 関数への入力として使用される、HTML5 の「ファイル」オブジェクトのファイル参照を定義する方法を考えています。HTML5Rocks の例やその他多数の例を見てきましたが、それらはすべて<input type=file>要素を使用して、操作対象のファイルに関する入力を読み取り、収集します。画像ファイル (つまり、バイナリ) を入力として取り、Base64 文字列を出力するつもりです。(当たり前かもしれませんが、私は HTML5 と JavaScript の世界は初めてです)
私の読書のいくつかは、セキュリティ上の理由からこれが不可能であることを示しているようです.JSは任意のファイルを実行できます. 再確認したかった。
「ファイル」入力タイプの出力は何ですか? 何らかの方法で手動で模倣できますか? (ここで、JS 内にファイル自体を直接インクルードする方法についての参考文献を 1 つ見つけましたが、バイナリ ファイルでそれを実行できますか? 率直に言って、FileMaker 側でそれを行う方法もわかりません。私の計画では、この時点で、FileMaker から既知の場所にファイルをエクスポートし、その場所を JavaScript への入力として使用します)
全体像: FileMaker 12 で自己完結型の Web ビューアー要素を作成しようとしています。FileMaker では、実行する前に HTML と JavaScript を動的に定義できます。データベースからの情報 (つまり、パスとファイル名) に基づいて、JavaScript を動的にハードコードして、既にファイル参照が含まれるようにしたいと考えています。これはすべてローカル マシンで実行され、サーバーは関与しません。
ファイルをエンコードするためにエンドユーザーが行う必要がある操作を最小限に抑えようとしています。画像をデータベースに入れたり、画像を再度ドロップ (またはファイルチューザー) したりする必要はありません。ウェブビューアで。このコードをすべて FileMaker データベース内に保持して、より移植性と堅牢性を高めたいと考えています。つまり、インターネット接続に依存する必要がありません。したがって、ユーザーがファイルをデータベースに入れると、データベースはそのイベントを自動的に検出し、JavaScript (ファイルへのパスを含む) を計算し、JavaScript が Base64 関数を実行して、エンコードされた文字列をデータベースに返します。
逆に、ユーザーにファイルを JavaScript 領域にドロップしてもらい、それをデータベースにコピーさせる必要があるかもしれません。ただし、JavaScript がデータベースと対話するためのハンドルを持っているかどうかはわかりません。
------------------------ 編集 (元の質問のタグ付けとフラグ付けに加えて)
今のところ、FileMaker 側のことはすべて無視しましょう。HTML5 と JavaScript をファイル入力部分として (FM で読み取ってから JS に出力しようとするのではなく) 使用するというルートに進むことにしました。JavaScript の部分が機能するかどうかを確認するためです。
これが私が今遊んでいるコードです。これは主に HTML5 Rocks デモと、私が見つけた base64 エンコーディング ルーチンからのものです。ただし、リーダー、onload イベント、およびエンコーディング関数を正確に定義して呼び出す方法に問題があります。任意の提案をいただければ幸いです:
<script>
// From: http://www.html5rocks.com/en/tutorials/file/dndfiles/
// JC update: changing the handleFileSelect() function to do the base64 Processing
function base64Encode(aFile) {
/*
* base64.js - Base64 encoding and decoding functions
* See: http://developer.mozilla.org/en/docs/DOM:window.btoa
* http://developer.mozilla.org/en/docs/DOM:window.atob
* Copyright (c) 2007, David Lindquist <david.lindquist@gmail.com>
* Released under the MIT license
*
* JC, update: Removed the 'atob' section of code; only need ENcoding, not DEcoding.
*/
if (typeof btoa == 'undefined') {
function btoa(str) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var encoded = [];
var c = 0;
while (c < str.length) {
var b0 = str.charCodeAt(c++);
var b1 = str.charCodeAt(c++);
var b2 = str.charCodeAt(c++);
var buf = (b0 << 16) + ((b1 || 0) << 8) + (b2 || 0);
var i0 = (buf & (63 << 18)) >> 18;
var i1 = (buf & (63 << 12)) >> 12;
var i2 = isNaN(b1) ? 64 : (buf & (63 << 6)) >> 6;
var i3 = isNaN(b2) ? 64 : (buf & 63);
encoded[encoded.length] = chars.charAt(i0);
encoded[encoded.length] = chars.charAt(i1);
encoded[encoded.length] = chars.charAt(i2);
encoded[encoded.length] = chars.charAt(i3);
}
return encoded.join('');
}
}
}
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object - a FileList of File objects.
var fReader = new FileReader () ;
var output = [];
for (var i = 0, f; f = files[i]; i++) {
if ( !f.type.match('image.*')) { continue; } //To skip non-image files
fReader.onLoad = (function (aFile) { return base64Encode(aFile); } ) (f);
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'<br><br>' , fReader.readAsBinaryString(f) , '<br><br>', '</li>');
//This defines the 'onLoad' behavior/function...I think.
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners. [Slightly modified by JC]
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>