$(document).ready(function(){

      $('.file').on('change', function(){
        const files = this.files;
        const resimlerKutu = $('.resimler');
        for ( var i=0; i<files.length; i++){
          let file = files[i];
          let name = file['name'];
          let size = file['size'];
          type = file['type'];


          let oku = new FileReader();
          oku.readAsDataURL(file);

          oku.onload = (function(file) {
            return function(e) {
              let kutu = $('<div></div>');
              let resim = $('<img>');
              let silBtn = $('<button type="button" class="sil" data-id="'+i+'">Sil</button>')

              resim.attr('src', e.target.result);
              kutu.append(resim);
              kutu.append(silBtn);
              resimlerKutu.append(kutu);

              silBtn.on('click', function() {
                kutu.remove();
                removeFile($(this).data('id'));
              });

            };

          })(file);

        }


      });

    });


    function removeFile(index){
      var attachments = document.getElementById("file").files;
      var fileBuffer = new DataTransfer();
      for (let i = 0; i < attachments.length; i++) {
        if (index !== i)
          fileBuffer.items.add(attachments[i]);
      }
      document.getElementById("file").files = fileBuffer.files;
    }