ローカル ストレージ: ファイル オブジェクトの保存と復元のハウツー ガイド
P粉253518620
P粉253518620 2023-08-22 13:29:16
0
2
508
<p></p> を使用する HTML5/JavaScript を使用するアプリケーションがあります。 <pre class="brush:php;toolbar:false;"><input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)"></pre> ; <p>カメラ画像をキャプチャします。アプリをオフラインで実行したいので、後で使用できるようにファイル (https://developer.mozilla.org/en-US/docs/Web/API/File) オブジェクトをローカル ストレージに保存するにはどうすればよいですか? ajax経由でアップロードする場合? </p> <p>ファイル オブジェクトを次から取得しています...</p> <pre class="brush:php;toolbar:false;">function gotPhoto(element) { var ファイル = 要素.ファイル[0]; // ここで「ファイル」をローカル ストレージに保存したいと思います :-( }</pre> <p>オブジェクトを文字列に変換して保存できますが、復元すると File オブジェクトとして認識されなくなるため、ファイルの内容を取得するために使用できなくなります。 </p> <p>これは実現不可能な気がしますが、提案はお待ちしています。 </p> <p>ちなみに、私の回避策は、保存中にファイルの内容を読み取り、完全な内容をローカル ストレージに保存することでした。これは機能しますが、各ファイルは 1MB 以上の写真であるため、ローカル ストレージをすぐに消費します。 </p>
P粉253518620
P粉253518620

全員に返信(2)
P粉005134685

これをbase64に変換して保存します。

リーリー
いいねを押す +0
P粉811349112

ファイル API オブジェクトをシリアル化することはできません。

これでは特定の問題は解決されませんが... 私はこれを使用したことがありませんが、この投稿を見ると、オフラインの画像データを何らかのファイルに保存して、いつでも使用できるようにする方法があるようです (ただし、ほとんどのブラウザではまだサポートされていません)。ユーザーがオンライン中に (localStorage を使用せずに) 復元します

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート