PHP, HTML ドラッグアンドドロップの実装

ドラッグアンドドロップの実装

よくファイルのアップロード等で、ドラッグアンドドロップでアップロードできるサイトをみますよね。

こういうやつです、って見せたいんですけど、windowsのキャプチャー機能が、フォルダ等を写してくれないのでわかりにくいです、、

一見難しそうですが、実はめちゃくちゃ簡単に実装できるので是非最後まで見ていってください。

※サンプルではJavaScriptを使って動きを付けていますが、今回はJavaScriptは使用しないため、サンプルとは若干異なります。

1 ドラッグアンドドロップの実装
2 完成形
3 実装コード

完成形

まずは、実際に作成するものの完成形を見ておきましょう。

本記事で紹介するコードは、以下のようなデザインになります。

さきほどもお伝えしたように、こちらで紹介するコードは、冒頭のサンプルとは異なります。

では、次の章から実装コードを見ていきます。

実装コード

ドラッグアンドドロップ機能は、HTMLとCSSのみで作成しています。

それぞれ順番に確認していきます。

HTMLファイル

HTMLのコードはこちらになります。

※bodyタグの中だけを紹介します。

<body>
    <form action="" method="POST" enctype="multipart/form-data">
        <div class="upload-area">
            <i class="fas fa-cloud-upload-alt"></i>
            <p>Drag and drop a file or click</p>
            <input type="file" name="upload_file" id="input-files">
        </div>
        <input type="submit" id="submit-btn" value="送信">
    </form>
</body>

<body>

<p>Drag and drop a file or click</p>

</div>

</form>

</body>

HTMLファイルだけだと、以下のようになります。

ここからCSSの方で調整していきます。

実際のデザインとHTMLタグの対応を簡単に確認しておきましょう。

中央の雲は、FontAwesomeのアイコンを使用しています。

詳しくは、【超簡単】 Font Awesomeの使い方を参考にしてください。

では、CSSファイルを見ていきます。

CSSファイル

CSSのコードはこちらになります。

このままだと重要じゃない部分が多いので、ポイントだけピックアップして説明します。

form {
    margin: 50px auto;
    width: 800px;
    height: 400px;
    box-shadow: 0 0 2px #3e3e3e;
    padding: 30px;
    text-align: center;
}

.upload-area {
    margin: auto;
    width: 85%;
    height: 300px;
    position: relative;
    border: 1px dotted rgba(0, 0, 0, .4);
}
.upload-area i {
    position: absolute;
    font-size: 120px;
    opacity: .1;
    width: 100%;
    left: 0;
    top: 80px;
}
.upload-area p {
    width: 100%;
    position: absolute;
    top: 200px;
    opacity: .8;
}

#input-files {
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

#submit-btn {
    font-weight: bold;
    margin-top: 20px;
    border-radius: 3px;
    width: 200px;
    height: 45px;
    background-color: rgba(108, 168, 255, .7);
    border: none;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6);
    opacity: .6;
    cursor: pointer;
}
#submit-btn:hover {
    background-color: rgba(108, 168, 255, 1.0);
}
#submit-btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}

form {

margin: 50px auto;

width: 800px;

height: 400px;

box-shadow: 0 0 2px #3e3e3e;

padding: 30px;

text-align: center;

}

.upload-area {

margin: auto;

width: 85%;

height: 300px;

position: relative;

border: 1px dotted rgba(0, 0, 0, .4);

}

.upload-area i {

position: absolute;

font-size: 120px;

opacity: .1;

width: 100%;

left: 0;

top: 80px;

}

.upload-area p {

width: 100%;

position: absolute;

top: 200px;

opacity: .8;

}

#input-files {

top: 0;

left: 0;

opacity: 0;

position: absolute;

width: 100%;

height: 100%;

}

#submit-btn {

font-weight: bold;

margin-top: 20px;

border-radius: 3px;

width: 200px;

height: 45px;

background-color: rgba(108, 168, 255, .7);

border: none;

box-shadow: 0 5px 0 rgba(0, 0, 0, 0.6);

opacity: .6;

cursor: pointer;

}

#submit-btn:hover {

background-color: rgba(108, 168, 255, 1.0);

}

#submit-btn:active {

position: relative;

top: 5px;

box-shadow: none;

}

このコードにおいて重要な部分は、32~39行目のここです。

#input-files {
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

#input-files {

top: 0;

left: 0;

opacity: 0;

position: absolute;

width: 100%;

height: 100%;

}

ここでミソとなる点は、 opacity: 0; の部分です。

このように調整することで、「ファイルを選択」という文字を消すことができ、画面いっぱいにinputタグを広げることができます。

これだけでは味気無いのですが、背景にそれっぽい画像を挿入することで、より良い感じに仕上がります。

おまけ

上のコードは単一のファイル用ですが、複数ファイルをアップロードするためには、inputタグを以下のように書き換えます。

1	<input type="file" name="upload_file[]" id="input-files" multiple>

こうすることで、複数のファイルを同時にアップロードすることができます。

複数ファイルを指定した場合は、PHPの方でfor文を使って残りの処理をしていきます。

参考までに以下のようにfor文を使えばすべてのファイルの処理ができます。

<?php

// 'upload_file' はファイル型のinputタグで指定したnameの値

for ($i = 0; $i < count($_FILES['upload_file']['name']); $i++) {

// 各ファイルの処理

}

これでおしまいです。

こんな感じで簡単に実装できるので、是非試してみてください。

>>【jQuery】パスワードが見え隠れする機能の実装

>> PHPとMySQLを使った会員登録システムの作り方