jQueryで画像一括アップロードを作ったよ

解説

ファイルを複数選択してドラッグ＆ドロップしてファイルを一括アップロードする処理を書きました。
Deferredを使って、ファイルアップロードが全部終わったらローディングアイコンを消すようにしました。
※サーバ側の処理は自分で実装してください…。

実装

HTML

<!-- 画像ドラッグ&ドロップ -->
<div class="drop_area_multiple">
    <input type="file" name="file" multiple="multiple" class="inputfile">
    <div class="drop_text1">ここにファイルをまとめてドロップ</div>
</div>

CSS

.drop_area_multiple {
  border: 2px dashed gray;
  text-align: center;
  background: #ffffff;
  width: 447px;
  line-height: 150px;
}
.dragtarget {
    background: #EDEDED;
}
.enter {
  background: linear-gradient(
    -45deg,
    rgb(218, 215, 215) 25%,
    #f5f1f1 25%,
    #f5f1f1 50%,
    rgb(218, 215, 215) 50%,
    rgb(218, 215, 215) 75%,
    #f5f1f1 75%,
    #f5f1f1
  );
  background-size: 40px 40px;
  animation: anime_stripe_1 0.8s infinite linear;
}
.disabled_drag_drop {
  pointer-events: none;
  opacity: 0.4;
}
@keyframes anime_stripe_1 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -40px;
  }
}
.pointer_off {
  pointer-events: none;
}

.drop_text1 {
  text-align: center;
  pointer-events: none;
  padding-bottom: 5px;
  color: #8A87B6;
}
.drop_input {
  text-align: center;
}
input.inputfile {
 display: none;
}

JavaScript

// ドラッグしている要素がドロップ領域に入ったとき・領域にある間
$('.drop_area_multiple').on('dragenter dragover', function (event) {
    event.stopPropagation();
    event.preventDefault();
    $(this).addClass('enter');
});
$('.drop_area_multiple').on('dragleave', function (event) {
    event.stopPropagation();
    event.preventDefault();
    $(this).removeClass('enter');
});

// 画像一括アップロード
$('.drop_area_multiple').on('drop', function (event) {
    event.preventDefault();

    var files = event.originalEvent.dataTransfer.files;
   
    showLoading();// ローディングアイコン出したり…

    // 並列処理
    var promises = [];
    for (var i=0; i<files.length; i++) {
        var file = files[i];
        promises.push(ajax_upload(file));
    }

    $.when.apply(null, promises).then(function() {
        hideLoading();
    });
    
    $(this).removeClass('enter');
});

// 画像アップロード
function ajax_upload(file) {
    var deferred = $.Deferred();

    let fd = new FormData();
    fd.append("file", file);
    
    let options = {
        type:'POST',
        url: '/upload_image.php',
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json'
    };

    $.ajax(
        options
    ).done(function(d){
        console.log(d)
        deferred.resolve();
        
    }).fail(function(d){
        deferred.reject();
    }).always(function(){
        //完了
    });

    return deferred.promise();
}