[ Tags :: DOM storage ]

複数ファイルアップロード等のための差分

category-icon

[追記 2010/05/26 17:13:22]

 oParts.jsでのデバグ消し忘れとIE8でlib.jsでエラーが出ていたのを修正。添付しておきます。

 こんばんは、martinです。HTML5に対応したブラウザ(Firefox最新版やSafari, Chromeなど)では、画像などのファイルアップロード時に複数のファイルを一括して選択・アップロード出来ます。

 ppBlogでも、それを可能するための差分ファイルを添付しておきます。ppBlogの次期バージョンはv1.9.0を予定していますが、それに先行する形で、とりあえず試されたい方はどうぞ。

 また、この差分アップデートを適用すると、ローカルストレージ(localStorageG)を利用した記事データのローカル保存のモードも有効になります(これはIE8も対応)。これは、書きかけの記事を、お使いのブラウザの保存機能を用いて、サーバー側ではなくローカルのPCに保存するものです。以前、(オフラインで書いていて)ほぼ書き上げた記事の投稿に失敗した経験があって、それで「オートドラフト」機能とは別につけてみようと思いました。従来の「オートドラフト」機能は、サーバーサイドに記事データを保存する点が「ローカル保存」と異なる点です。

 この新機能の利点は、インターネットに接続されていない環境でも、あらかじめ記事画面さえ開いていれば、オフラインで記事を書き続けて、とりあえずローカルに保存しておける点です。何かの間違いでブラウザ画面を閉じてしまっても、一度「ローカル保存」しておけば、再度ブラウザ画面を開いた際に、「保存履歴」から記事を復元することが可能です。
shot1
「ローカル保存」のボタンと「保存履歴」のボタン。
shot2
「保存履歴」ボタンを押したときの挙動
 添付ファイルの内容は以下の通りです。
  • utils.php
  • upload.php
  • modules/write.inc.php
  • modules/edit.inc.php
  • Images/progressbar.png
  • css/edit.css
  • css/admin.css
  • js/lib.js
  • js/oParts.js
  • js/editor.js

 それぞれ既存のファイルを上書きすれば良いかと思います。もとのファイルのバックアップは取っておいて、いつでも元に戻せるようにしておきましょう。自分のサーバー環境では、複数ファイルアップロードは問題ないようですが、サーバー環境はいろいろなので何か不具合とかあればご報告お願いします。

添付ファイル: multiple_upload.zipattachedIcon  lib.jsattachedIcon  oParts.jsattachedIcon 

   


— posted by martin at 08:26 am   commentComment [14]  pingTrackBack [0]

localStorageでIE8がクラッシュする件 続き

category-icon

 こんばんは。前回の書き庫Link で、localStorageに空の値を入れるとIE8がクラッシュすると書きました。なので、空の値が入らないようなチェックを入れれば良いのですが、それだけだとナンなので、症状をもう少し追ってみました。

 もう一度、(IE8が)クラッシュするコードを書いておきます。
function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value; // valueが空白だとクラッシュ!
}
 以下のように、直接空の値を入れる分には大丈夫でした。
function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value; // これは使用しない
 window.localStorage[key] = ""; // 直接、空の値を入れる → これは大丈夫。
}

 ほうほう。で、クラッシュするデモページのHTMLソースをよく見てみると、input[type=text]でvalueの値を指定していないですね。もしかしてこのせいかなぁ、と

<input type="text" id="value" value="" />

value=""を追加しましたが、やっぱりクラッシュします。input[type=text]の値がないときでも、 document.getElementById("value").value はちゃんと文字列として解釈されます(typeof value == "string")。デモページは、input[type=text]のvalue値を取得していますが、これはTEXTAREA要素であっても、やはり内容が空っぽの場合、IE8ではクラッシュを引き起こしました。

 何でですかねぇ。試しに、強引に文字列ではないオブジェクトを入れてもクラッシュしません

window.localStorage[key] = document.getElementById("value"); // これは [object] という文字列に変換される

 確かに、文字列のstringだとブラウザが解釈しているのに、それが空っぽだとクラッシュするわけです。じゃ、以下はどうだろうか。

var empty = ""; // 空っぽの変数を用意する。
window.localStorage[key] = empty; // これはセーフ。クラッシュしない。

さすがにこれはオッケーです。じゃ以下はどうだろうか?

 var val = document.getElementById("val").value; // これが空っぽとする
 var empty = "";              // val もempty も空っぽの場合
 alert(empty === val); // 厳密等価演算子は true を返す
 window.localStorage[key] = val; // なのに、val だとクラッシュ!

 とりあえず string と認識しているはずなのに、代入する段階以降で、別のクラッシュを引き起こす「何か」と解釈されるらしい。というわけで、とりあえず以下のようにすれば、IE8でのクラッシュを回避できることが分かった。でも、ナンだかすっきりしないですね:(

function addItem(){
 var _key = document.getElementById("key").value;
 var _val = document.getElementById("val").value;
 window.localStorage[_key] = new String(_val); // new String()で明示してあげる
 alert("localStorage."+_key+" の値は「"+localStorage[_key]+"」です。");
}

new String()でちゃんと文字列オブジェクトとして再評価してあげると良いらしい。というわけで、IE8でもクラッシュしないlocalStorageのデモページをリンクしておきます。

 →http://p2b.jp/demo/localStorage2.htmlLink

 ちなみに、上のコードでalert(typeof new String(_val)) は何となるでしょうか? これは、 もはやstring ではなくobjectとなります。文字列オブジェクトです。

 

— posted by martin at 06:46 am   commentComment [0]  pingTrackBack [0]

localStorageで空の値を入れるとIE8がクラッシュする件

category-icon

 こんにちは。そろそろppBlogにもlocalStorageGに対応したスクリプトを組み込もうかと思っていますが、IE8で空(から)の値を入れるとブラウザがクラッシュして終了する現象に遭いました。MacBook Pro上のVMware Fusionに入れたWindows7 RC版IE8で発生します。正規版だとOKなのかなぁ。

 簡単なデモを用意しました(IE8ならクラッシュしても良い状態でアクセス)。→http://p2b.jp/demo/localStorage.html

 Firefox3.5では値が空でもエラーも何も起きませんが、IE8では即座にクラッシュです。そのスクリーンショットをば。適当なキーを設定して(例えば「foo」)、値を何も設定せずに「追加」ボタンを押すと発生。

IE8-crashed
クラッシュしても自動的に復元されますが・・・。

上記ページのスクリプトはごくシンプルなもの。

if(typeof localStorage != "object"){
 if(typeof globalStorage == "object"){ // Firefox2 possible
  localStorage = globalStorage[location.hostname];
 } else alert("お使いのブラウザはこのスクリプトに対応していません。");
}

function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value;
}

 空の値かどうかチェックすれば済む話ですが。

関連エントリー(解決編?)

  ■http://p2b.jp/200912-localStorage-crashes-IE8-with-empty-value-part2

 


— posted by martin at 09:36 pm   commentComment [5]  pingTrackBack [1]

T: Y: ALL: Online:
Created in 0.0055 sec.
prev
2017.11
next
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30