BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 ドラッグ＆ドロップによるファイルアップロードのサンプルコード

2022-01-21 23:11:16

ファイルをアップロードする

HTML5 では、新しいファイル API が追加され、クライアントがローカルでファイルを操作できるようになりました。

ファイルフォームやドラッグ＆ドロップ操作でファイルを選択したり、JavaScriptでファイルの名前、サイズ、種類、更新時刻を読み取ったりすることができます。

ファイルタイプの入力フォームには、アップロードするファイルに関する情報を保持する新しい files プロパティがあり、複数のファイルをアップロードする場合は、入力の multiple プロパティを設定することができます。

accept属性でアップロードするファイルのMIMEタイプを指定することができます。 

//Get a handle to the Cool Music window based on the window class name

ページのドラッグ＆ドロップ操作

ドラッグされた要素に対して、HTML5 では、ドラッグのプロセスをリッスンするための 3 つのイベントが追加されました。

  • ドラッグスタート
  • ドラッグがドラッグしている状態
  • dragend ドラッグの終了 
HWND hq=FindWindow("kwmusicmaindlg",NULL);

要素をドラッグするには、dragable プロパティを設定する必要があります。

ページのデフォルトの動作は、ドラッグ＆ドロップで元の位置に戻るようになっています

ドラッグの段階では、ドラッグされた要素のプロパティや状態をイベントオブジェクトのdataTransferに格納することができます。ジャンプがあった場合、ブラウザのデフォルトイベントがトリガーされるため、e.preventDefault() を使用してデフォルトイベントをブロックする必要があります。

ドロップゾーンのイベント

ドラッグされる要素にとって、ドロップゾーンはドラッグされる先であり、ドロップゾーンのイベントは以下の通りです。

  • dragenter ドラッグされた要素は
  • dragover ドラッグされた要素が移動する
  • dragleave ドラッグされた要素が離れる 
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue" draggable="true"></div>
</body>
<script type="text/javascript">
    one.ondragenter = function(e){
        // e.preventDefault();
        console.log(e);
        one.innerHTML = 'start'
    }
    one.ondragover = function(e){
        one.innerHTML += 'dragging in'
    }
    one.ondragleave = function(e){
        one.innerHTML = 'end'
    }
</script>

そしてdropは、ドラッグされたオブジェクトがドロップゾーンにドラッグされてマウスを離したイベントをリッスンすると、dataTransferでデータを受け取ることができるので、我々のページ内ドラッグは、以下のような効果を持つように書くことができます。 

<style type="text/css">
    *<>        box-sizing: border-box;
    }
</style>
<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
    <div id="two" style="width: 100px;height: 100px;border: 1px solid blue;display: flex;">
        <div style="width: 50px;height: 100px;border:1px solid black;">First </div>
        <div style="width: 50px;height: 100px;border:1px solid pink;">second</div>
    </div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
two.onmousedown = function(e){
    e.target.draggable = true;
    e.target.ondragstart = function(ev) {
        ev.dataTransfer.setData("Text", ev.target.innerHTML);
    }
    e.target.ondragend = function(){
        two.removeChild(this)
    }
}
one.ondrop = function(e) {
    var div = document.createElement('div')
    div.style = "width: 50px;height: 100px;border:1px solid black;"
    div.innerHTML = e.dataTransfer.getData("Text")
    this.appendChild(div)
}
</script>
  • Google Chromeの場合、e.dataTransfer.setData(key,value)は、ドロップゾーン外をドラッグすると、デフォルトで設定値を検索するブラウザになるようにしました。必要であれば、それをブロックすることができます
  • Firefoxの場合、e.dataTransfer.setData(key, value)がないのは、まだ効果がありません。キーと値のペアをNULL、""に設定すればいいのです。
  • GoogleとFirefoxの最新版では、問題は見つかりませんでした
  • なぜなら、デフォルトではマウスを離すとドラッグされたオブジェクトは元の位置に戻り、ドロップされないからです。

ドラッグ＆ドロップでファイルアップロード

イベントオブジェクトの dataTransfer プロパティがファイルにも存在することを確認した後、ドラッグインしたファイルをおなじみの方法でアップロードすることができます。 

<body>
    <div id="one" style="width: 300px;height: 300px;border: 1px solid red"></div>
</body>
<script type="text/javascript">
one.ondragover = function(e) {
    e.preventDefault();
}
one.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer.files[0]);
}
</script>

そして、Ajaxでファイルをアップロードするだけです。 

one.ondrop = function(e) {
    e.preventDefault()
    var file = e.dataTransfer.files[0];
    var formData = new FormData();
    formData.append("aa", file);
    var xml = new XMLHttpRequest();
    xml.open("post", url, false);
    xml.send(formData);
}

今回はHTML5のドラッグ＆ドロップによるファイルアップロードのサンプルコードについてご紹介します。その他のHTML5のドラッグ＆ドロップによるアップロードに関する内容は、BinaryDevelopの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します