Help us understand the problem. What is going on with this article?

ドラッグして画像アップロード&クリックで画像アップロード&アップロードした画像を即座に表示

はじめに

なんか出来ちゃったので配布。
使うアテがないので供養のつもり。

編集リクくれたら解説とかするかも。

サンプル

See the Pen VwYZrqO by Yomogenium (@yomogenium) on CodePen.

コード

※全部1本にまとめてあります

test.html

<style>

#imageframe{
    width: 300px;
    height: 400px;
    border: 1px solid black;
    background-image: url(./hogehoge.png);
    background-repeat: no-repeat;
    background-size: contain;
}
</style>

    <form action="hoge.html" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
        <div class="portlate" id="imageframe">
            <input type="file" name="imgfile" value="" accept="image/png,image/jpeg,image/gif" multiple>
        </div>
    </form>


<script type="text/javascript">
(function(){
    'use strict';

    var imageflame = document.getElementById('imageframe');
    var imageinput = document.querySelector('#imageframe input[name="imgfile"]');
    imageinput.style.display = "none";

    // 画像をドラッグしたとき、それを読み込みつつ表示

        // ファイルがドロップされたとき、そのファイルのアップロード処理を実行しつつ、クラス削除
        imageflame.addEventListener('drop', function(event){
            event.preventDefault();

            // クラス削除
            imageflame.classList.remove('dropover');

            // ドロップファイルを変数に格納
            var files = event.dataTransfer.files;
            // ファイルそのものをinputに格納
            imageinput.files = files;

            // 読み込んだ画像を表示
            for(var i = 0; i<files.length; i++){
                var file = files[i];

                var reader = new FileReader();
                reader.onload = function(elem) {
                    // 引数のelemはドラッグ中のファイルではなく、読み込みされた時点でのファイル。
                    imageflame.style.cssText = "background-image: url(" + elem.target.result + ");";
                };
                reader.readAsDataURL(file);

            }

        });

        // ドラッグ中のファイルがimageflameの上に来ていたらクラス追加しつつ、ドロップの許可を出す
        imageflame.addEventListener('dragover', function(event){
            event.preventDefault();
            imageflame.classList.add('dropover');

            // ドラッグ中のファイルの属性を変更し、ドロップ可能にする
            event.dataTransfer.dropEffect = 'copy';
        });

        // ドラッグ中のファイルがimageflameの上から離れたらクラス削除
        imageflame.addEventListener('dragleave', function(){
            imageflame.classList.remove('dropover');
        });

    // クリックしたときに「ファイルを選択」を起動
    imageflame.addEventListener('click', function(){
        imageinput.click();
    });

    // 画像が挿入されたとき、その画像を表示する
    imageinput.addEventListener('change', function(event){

        var reader = new FileReader();
        reader.onload = function(event){
            imageflame.style.cssText = "background-image: url(" + event.target.result + ");";
            console.log(event.target.result);
        }
        reader.readAsDataURL(event.target.files[0]);
    });


})();
</script>

参考文献

http://koheik.hatenablog.com/entry/2016/07/08/152936
https://qiita.com/ginpei/items/5cebb14e210fc0770e94
https://qiita.com/FiNGAHOLiC/items/4bddee7b0bfe9555636a

yomogenium
おしごとのためにつかっています、まる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした