HTML5の機能を使ってローカル画像のファイルを画面に表示する方法です。
画面に表示されるのみで、実際にサーバーにアップロードはされていません。
DEMO
<script language="javascript" type="text/javascript">
onload = function(){
var element = document.getElementById('dragDrop');
//ユーザーに｢使わない」ことを明示するのが仕様。。。
element.ondragover = preventer;
element.dragenter = preventer;
//イベント登録
element.ondrop = dropping;
}
function preventer(e){
e.preventDefault();
}
function dropping(e){
//I.E.未実装
var files = e.dataTransfer.files;
if(!files){
alert('dataTransfer.files未実装');
}
if(typeof FileReader != "undefined"){
//I.E.はFileReader未実装
reader = new FileReader();
reader.onload = function(evt) {
var img = document.createElement('img');
img.setAttribute("src", evt.target.result);
document.getElementById('dragDrop').appendChild(document.createElement('br'));
document.getElementById('dragDrop').appendChild(img);
};
reader.readAsDataURL(files[0]);
} else {
alert("本ブラウザではFileReader未実装");
}
//記載しておかないと、画面が画像表示に切り替わってしまう。
e.preventDefault();
}
</script>
1.イベントを登録します。ondragover dragenterイベントは｢無効であること」を明示しなければなりません。
※↑HTML５の仕様のため
2.ondropをイベント登録します。
3.ファイルURLを読み込みIMGタグに設定しています。
4.記述しておかないと画像を表示する画面に切り替わってしまいます。
※備考
CSSに"-khtml-user-drag: element;"を定義してsafariも対応しおうとしたがダメだった。
I.E.はe.dataTransfer.filesやFileReaderなど対応していないものが多い。
ベンダーごとにポリシーがかなり異なるため、全ブラウザ対応は、難しいかもしれないです。
※動作確認環境
・chrome 23 ○
・firefox 17 ○
・i.e.9 × ・・・e.dataTransfer.filesが取得できない。 FileReaderがない。
・Safari 5.1 × ・・・FileReaderが未実装
PR
