8042


iPhoneの写真の容量平均が約3MB。画像を20枚一括でセレクトした場合、60MBのデータをローカルに記憶しなければいけません。

  * localStorageの容量が約5MB
  * WebSQLの容量が約50MB

これでは、選択された画像をローカルに保存するのは難しそうです。

そこで、`<input
type="file">`で取得したFileオブジェクトをローカルストレージに保存することで、ページを更新またはブラウザを再起動したあとも、保存されたFileオブジェクトを利用して画像を再読出するという方法を思いついたのですが、これは実現できますか？

多分ムリだと思うので、その場合他に良い解決方法はありませんでしょうか？


CC BY-SA 3.0
2015-03-17T22:11:09.783
8035
2022-06-08T11:48:38.963
5840
question
html5
画像を一括アップロードできるフォームでブラウザを閉じたあとも続きから入力できるようにしたい。


html5での`<input type="file">`はJSのサンドボックス外にあるローカルのファイルにアクセスするので、  
セキュリティ上ユーザーのアクションが無いと実体への参照を作成できない特殊なfileオブジェクトです。

ローカルストレージから参照情報を取り出すとユーザーアクションが無いので  
fileオブジェクトとしての実体参照は出来ません。  
また、ローカルストレージは基本的に文字列として保存するので  
画像をbase64等の確実に保存できる形式に変換すると容量オーバーする可能性が有ります。  
参考  
<https://web.archive.org/web/20140818003911/http://blogs.msdn.com:80/b/osamum/archive/2012/03/05/html5api.aspx>  
<http://d.hatena.ne.jp/a_bicky/20130203/1359893593>

他の方法を挙げるとすれば、fileオブジェクト実装以前から使い古された  
サーバー側に画像データを保存するやり方が有ります。

  * 一時ファイルとしてサーバーにアップロードしてローカルストレージかクッキーに認証情報を保存。
  * 表示するときはサーバーから取ってきて表示。  
※一定期間使用されない一時ファイル画像はサーバー側で自動削除しておくことを推奨。

尤も合計60Mの画像容量は送信するにも大きすぎるので、  
圧縮するとか、バックグラウンドで個別に送信しておくとか、  
一括送信時はサーバー上の一時保存ファイルを  
直接サーバー側で処理するとか、何か考えた方が良いでしょうね。


CC BY-SA 4.0
2015-03-18T04:12:48.873
8042
2022-06-08T11:48:38.963
2022-06-08T11:48:38.963
19769
5479
8035
answer