問題タブ [fileapi]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - zipファイルとHTML5ファイルAPI
File APIまたはHTML5スイートの別の部分を使用してファイルをzipファイルにバンドルすることは可能ですか?もしそうなら、利用可能な実装例はありますか?そうでない場合、これは来年または2年以内に最新のブラウザでサポートされる可能性がありますか?
html - HTML 5、Javascript、File API を使用したファイルのダウンロード
JavaScript を使用して、HTML の FileAccess API を通常のファイルのダウンロードと統合できますか。
通常、次の方法でファイルをダウンロードします。
これで、ファイルが tempFolder と、ダウンロード用に指定されたフォルダーにダウンロードされると思います。
しかし、 WWC ドラフト on HTML 5 File API に記載されているように、サンドボックス化された場所にファイルをダウンロードすることは可能ですか。
これができれば、前の質問の「ダウンロードしたファイルを削除する方法が必要」は解決すると思います。
html - HTML 5 で利用可能なファイル API を使用して、サンドボックス化された場所にファイルをダウンロードすることはできますか?
ユーザーにダウンロードさせるドキュメントが、プログラム全体でプログラムによって操作されるようにしたかったのです。
File APIがアプリにそれらを操作する機会を与えることを知りました。しかし、サンドボックス化された場所にファイルを保存するにはどうすればよいでしょうか?
html - ファイルアップロードの選択を特定のタイプに制限する
とにかく、<input type="file" />
要素を介してファイルタイプの選択を制限しますか?
たとえば、画像タイプのみをアップロードしたい場合は、可能な選択を(image / jpg、image / gif、image / png)に制限し、選択ダイアログで他のmimeタイプのファイルをグレー表示します。
ps .type属性をスキャンすることで、FileAPIを使用して事後にこれを実行できることを知っています。私は実際にこれを事前に制限しようとしています。フラッシュを介してこれを行うこともできますが、これにフラッシュを使用したくありません。
html - HTML5 ファイル API - スライスかどうか?
HTML5 Rocksでのファイルのアップロードに関するいくつかの良い例がありますが、私には十分に明確でないものがあります。
私が見る限り、ファイルのスライスに関するサンプル コードは、ファイルから特定の部分を取得してから読み取ります。注が示すように、これは大きなファイルを扱う場合に役立ちます。
アップロードの監視に関する例では、これが大きなファイルをアップロードするときに役立つことも示しています。
ファイルをスライスしなくても安全ですか? サーバー側の問題、メモリなどを意味します。Chrome はFile.slice()
現在サポートされておらず、可能であれば肥大化した jQuery プラグインを使用したくありません。
javascript - FileWriter API: blob を使用してデータを書き込む
blob:blahblah
ファイルを指すようなブロブURLがあります。このブロブの背後にあるファイルをローカル ファイル システムに書き込みたいと考えています。writer.write()
ドキュメントには、(input-type-file からの) ファイル オブジェクトとblobを受け入れると記載されています。しかし、これを試すと型の不一致エラーがスローされます
blob
が受け入れられないことが問題であることはわかっていますが、ブロブをファイルシステムに保存する方法を知りたいです。スクリプトの前半で、input-type-file から前述の BLOB を作成し、その値を var に保存しました。
編集
わかりましたので、最初にもっとコードを与えるべきだったと思います。
まず、ブロブ URL を作成し、このように var に保存します
files
input-type-file html タグからのもので、i はファイル数だけループされます。あなたはギグを知っています。
次に、変数はいくつかの媒体を通過します。最初にchromeのメッセージパッシングAPIを介して別のページに移動し、次にそのページからワーカーに経由postMessage
し、最後に再び親ページにpostMessage
戻ります。
最後のページでは、このようにファイル システム API を介して BLOB のファイルをローカル ファイル システムに保存するために使用するつもりです。
しかし、writer.write
スローUncaught Error: TYPE_MISMATCH_ERR: DOM File Exception 11
このエラーは、に提供された変数がテキストであり、 (複数のページ/スコープを通過した後ではなく直接) のwriter.write
ようなものからの blob オブジェクトではないか、 . では、ブロブの URL を使用してファイルを保存するにはどうすればよいでしょうか。createObjectUrl
window.WebKitBlobBuilder
javascript - window.URL.revokeObjectURL()はメモリをすぐに解放しません(またはまったく解放しません)?
ドラッグアンドドロップと複数の選択ファイルを使用してサーバーに画像をアップロードするためのHTMLインターフェイスを作成しています。サーバーに送信する前に画像を表示したい。だから私は最初に使用しようとしましたが、この投稿FileReader
のようにいくつかの問題がありました。だから私は自分のやり方を変えて、ebidelが投稿で推奨しているようにblob:urlを使用し、メモリを解放することにしました。window.URL.createObjectURL()
window.URL.revokeObjectURL()
しかし今、私はこれに似た別の問題を抱えています。クライアントが必要に応じて一度に200枚の画像をアップロードできるようにしたいと思います。しかし、ブラウザがクラッシュし、使用されたRAMが非常に高かった!そこで、同時に表示される画像が多すぎるのではないかと思い、一度に10個のファイルしか処理できないように、配列を使ってファイルの待機キューを設定しました。しかし、それでも問題は発生します。
Google Chromeでchrome://blob-internals/
、ファイル(通常はによってすでにリリースされているwindow.URL.revokeObjectURL()
)を確認すると、約8秒の遅延後にリリースされます。Firefoxの場合はわかりませんが、ファイルがリリースされていないようです(about:memory
->画像をチェックします)
私のコードは悪いですか、それとも私とは無関係の問題ですか?ナビゲーターにメモリをすぐに解放させる解決策はありますか?それが役立つ場合、これは問題が発生するJavaScriptの一部です:コードが質問に含まれていなかったため、リンクが期限切れになりました。
編集
これは一種の独自の回答+bennlichへの回答です(コメントするにはテキストが長すぎます)
user1835582の回答から、Blob / Fileを実際に削除できることがわかりましたが、ブラウザーには画像が必要ですが、画像はメモリ内のどこかに保持されます(これは論理的です)。ですから、方法ではなく、クラッシュとスローダウンを引き起こした画像(多くと重い)を表示するのは事実revokeObjectURL
です。さらに、各ブラウザは独自の方法でメモリを管理するため、動作が異なります。これが私がこの結論に至った経緯です。
まず、 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_imagesrevokeObjectURL
のソースコードを使用した簡単な例を使用して、これがうまく機能することを試してみましょう。Chromeを使用すると、表示された画像をチェックするか、空白の新しいタブで開こうとすることで、Blobが適切に取り消されていることを確認できます。注:Blob参照を完全に解放するには、を追加します。数年前に質問を投稿したとき、blobをリリースするのに約8秒かかりましたが、今ではほぼ即時です(おそらく、Chromeやより優れたコンピューターの改善によるものです)。chrome://blob-internals/
document.getElementById("fileElem").value = ""
次に、充電テストの時間です。私はそれぞれ約2.5Moの100のjpgでそれを行いました。その画像が表示された後、私はページをスクロールしました。Chromeがクラッシュし、Firefoxが低速でした(他のブラウザではテストされていません)。しかし、私がコメントしたときli.appendChild(img)
、大量の画像があっても、すべてうまくいきました。これは、問題がrevokeObjectURL
実際に適切に機能する方法に起因するのではなく、多くの重い画像を表示することに起因していることを示しています。また、何百もの重い画像を含む単純なhtmlページを作成してスクロールすることもできます=>同じ結果(クラッシュ/スローダウン)。
最後に、画像のメモリ管理について詳しく調べるために、Firefoxでabout:memoryを調べるのは興味深いことです。たとえば、ウィンドウがアクティブな場合、Firefoxは画像を解凍します(画像->非圧縮-ヒープが上がります)が、raw(画像-> raw)は常に安定しています(読み込まれた画像の量に対して)。ここにメモリ管理についての良い議論があります:http://jeff.ecchi.ca/blog/2010/09/19/free-my-memory。
javascript - ファイルを読み取り、コンテンツを JavaScript で表示する
ファイルにデータを保存する必要があり、ページをロードするときに、このファイルを読み取ってこのデータをページに追加したいと考えています。理由はわかりませんが、この割り当ては役に立たないため、データベースもサーバーも使用できないため、ローカルファイルに保存して読み取る必要があります。
ネットを検索したところ、javascriptから直接ファイルにアクセスすることは許可されていませんが、HTML5 でFileAPIを使用すると、読み取るファイルを選択できることがわかりました。
私の質問は、これに関するリソースがないため、これをどのように行うかです。ファイルを読み取って文字列にするだけです。ありがとう、
javascript - ブラウザのドラッグ画像でhtml5ファイルAPI機能を取得する方法
google imagesのように、既にブラウザに読み込まれている html ページの画像をドラッグ アンド ドロップする機能を取得したいと考えています。htm5 ファイル API を実装するスクリプトがいくつかあることは知っていますが、ブラウザ内の画像を認識できるスクリプトはありません。入手方法は?