プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML5&JavaScript、ドラッグ&ドロップでファイルをアップロードする
HTML5、ファイルのドラッグ&ドロップを受け付ける」でテンションが下がっていたのですが、
せっかくなので、ドラッグ&ドロップによるファイルアップロードも作ってみました。
というわけで、サンプルコードφ(--)

■test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
<!--
    .drag_area {
        width: 200px;
        height: 200px;
        background-color: #faa;
    }
-->
</style>

<script src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
<!--
    // ドラッグ
    function fDragOver(e){
        e.preventDefault();    //決まり文句
    }

    // ドロップ
    function fDrop(e){
        e.preventDefault();    //決まり文句

        //ここにドロップした際の処理を書く

        var f = e.dataTransfer.files[0];
        var fd = new FormData();
        fd.append('file', f);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            error: function(xhr, error) {
                alert('失敗');
            },
            success: function(response) {
                alert('成功');
            }
        });


    }
//-->
</script>
</head>
<body>

<div class="drag_area" ondragover="fDragOver(event);" ondrop="fDrop(event)">
    ここにファイルをドラッグしてちょーだいな
</div>

</body>
</html>

■upload.php
<?php
    move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES["file"]["name"]);

FormDataを使って、ファイルの内容をパラメータとしてくっつけています。
ここの部分ねφ(--)

        var fd = new FormData();
        fd.append('file', f);

あとは「$.ajax()」を使ってサーバ側に送っているだけです。

主処理部分が分かるように、サンプルは必要最低限のコードしか書いていません。
エラー処理とかは入れてないので、そのままでは実用には耐えられないと思います。
使う方は適当に処理を追加してください。

あと、HTML5を使っているので、IE8とかでは動きません。
古いブラウザに対応する必要がある方はご注意ください。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事