ふにゃるんv2

もとは、http://d.hatena.ne.jp/Wacky/

PukiWikiの添付ファイル使用時、ローカルファイルをドラッグ&ドロップしたい(少し挽回版)

先日の、

の、少し挽回版です。


ある一定のバージョン(確認した限りIE6。IE7もいけそう)なら、ローカルファイルをドラッグ&ドロップできるメドが付きました。

ドラッグ&ドロップできる条件

調べていて判ったのですが、ローカルファイルをドラッグ&ドロップできるか否かは、ファイル入力欄にクリップボードからの文字列貼り付けが出来るか否かに拠ります。


試しに、文字列を適当にコピーした後、ファイル入力欄で右クリックしてみて下さい。
3
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
1 posted by (C)wacky

ご覧の通り、ファイル入力欄にローカルファイルのパスが、自動的に入力されます。
2
2 posted by (C)wacky

後は、「アップロード」ボタンを押すだけ。楽になりました。

最後に

私のメイン環境はIE8でして、その環境だと右クリックメニューの「貼り付け」と「削除」が出来ないんですね。
う〜ん、最後の一押しが…。