PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(少し挽回版)
先日の、
- PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(残念賞版)
http://d.hatena.ne.jp/Wacky/20100905/1283681820
の、少し挽回版です。
ある一定のバージョン(確認した限りIE6。IE7もいけそう)なら、ローカルファイルをドラッグ&ドロップできるメドが付きました。
ドラッグ&ドロップできる条件
調べていて判ったのですが、ローカルファイルをドラッグ&ドロップできるか否かは、ファイル入力欄にクリップボードからの文字列貼り付けが出来るか否かに拠ります。
試しに、文字列を適当にコピーした後、ファイル入力欄で右クリックしてみて下さい。
3 posted by (C)wacky
↑
このように、「貼り付け」とか「削除」項目が表示されていれば、ドラッグ&ドロップが出来るのでは無いか?と思います。
コードと動作
早速ですが、patchコードを示します。
--- attach.inc.php 2006-04-15 08:51:12.000000000 +0900 +++ attach.inc.php.new 2010-09-08 23:00:59.250000000 +0900 @@ -408,6 +408,44 @@ $title = $_attach_messages[PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY ? 'msg_adminpass' : 'msg_password']; $pass = '<br />' . $title . ': <input type="password" name="pass" size="8" />'; } + + $file_box = ''; + if( ereg( "MSIE", getenv("HTTP_USER_AGENT") ) ){ + $file_box = <<<EOD +<!-- IE only --> +<object id="DnD_Box" classid="clsid:8E3867A3-8586-11D1-B16A-00C0F0283628" width="350" height="100"> + <param name="OleDropMode" value="1"> + <param name="Style" value="1"> + <param name="SimpleText" value="In this area, please do Drag & Drop of a file."> + <param name="allowScriptAccess" value="always"> +</object> +<script type="text/JScript"> +function Sleep(ms){ + var st_tm = new Date().getTime(); + while((new Date().getTime()) < (st_tm + ms)); +} +function DnD_Box::OLEDragDrop(Data){ + if(Data.GetFormat(15)){ + var O = ""; + var e = new Enumerator(Data.Files); + O = e.item(); + //alert(O); + DnD_Box.SimpleText = O; + clipboardData.setData("Text", O); // ファイルパスをクリップボードへ + var e = document.getElementById("_p_attach_file"); + e.select(); + e.focus(); + var w = new ActiveXObject("WScript.Shell"); + w.SendKeys("%{TAB}"); + Sleep(500); + w.SendKeys("^v"); + //document.getElementById("_p_attach_file").click(); // ファイルダイアログを開くだけ + } +} +</script> +EOD; + } + return <<<EOD <form enctype="multipart/form-data" action="$script" method="post"> <div> @@ -419,11 +457,12 @@ <span class="small"> $msg_maxsize </span><br /> - <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file" /> + <label for="_p_attach_file">{$_attach_messages['msg_file']}:</label> <input type="file" name="attach_file" id="_p_attach_file"/> $pass <input type="submit" value="{$_attach_messages['btn_upload']}" /> </div> </form> +$file_box EOD; }
これを適用すると、下図のようにローカルファイルをドロップ領域にドラッグ&ドロップすると、
1 posted by (C)wacky
ご覧の通り、ファイル入力欄にローカルファイルのパスが、自動的に入力されます。
2 posted by (C)wacky
後は、「アップロード」ボタンを押すだけ。楽になりました。
最後に
私のメイン環境はIE8でして、その環境だと右クリックメニューの「貼り付け」と「削除」が出来ないんですね。
う〜ん、最後の一押しが…。