SmallStyle


2012-03-28

_ 絵日記プラグインでファイルを Drag & Drop でアップロードできるようにしてみた

WebKitでのファイルのドロップ

Safari や Chrome などの WebKit エンジンのブラウザは File フィールドにファイルをドラッグするとファイルダイアログから選択しなくてもファイルを指定できるので知っているとちょっと便利です.ただ,これだとドロップできるフィールドが小さくて使い勝手も悪く,またドロップできるのかどうかもわかりにくかったりします.

というわけで,tDiary の絵日記プラグインでは,もう少し分かりやすい形でドロップしてアップロードできるようにしてみました.

pluginのドロップフィールド

絵日記プラグインが有効になっている日記の編集画面でブラウザにファイルをドラッグすると,ファイルフィールドの部分に「ここにファイルをドロップ」と表示されたフィールドが現れます.Gmail のファイル添付に似た感じです.

この仕組みはページ遷移なしのアップロードを実現したときに利用した File API を利用しているので,非対応ブラウザではドッロプフィールドは表示されません.Chrome や Firefox,Safari などで利用可能です.


about me

いろいろと興味を持ったことを書いてます.ちょっとしたことは hb(@smallstyle) on Twitter で書いてます.

Archive

2003|01|02|03|04|05|06|07|08|09|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|12|