preview files ก่อน upload

preview.js

function readURL(input) {
    if (input.files.length > 1) {

      var htmlPreview = $('#preview-files');
      htmlPreview.html("");

      $.each(input.files, function(i, v) {

        var filename = v.name;
        var filetype = v.type;
        var filesize = v.size;

        var allowImage = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];

        var reader = new FileReader();
        reader.onload = function(e) {
          var html = "";
          html += "<div class=\"file-preview\" data-id=\""+ i +"\" style=\"padding: 5px;\">";
          
          if(allowImage.includes(filetype)){
            html += "<img style=\"border: 1px solid #ABC2DD;border-radius: 1px;width: 150px;\" src=\""+ e.target.result +"\" alt=\""+ filename +"\" />";
            html += "<a href=\"javascript:void(0);\" onClick=\"deleteFile(this, "+ i +");\" title=\"ลบ\" class=\"delete-file\" style=\"position: absolute;margin-top: 20px;padding-left: 5px;\">x</a>";
          }else{
            html += "<span>" + filename + "</span>";
            html += "<a href=\"javascript:void(0);\" onClick=\"deleteFile(this, "+ i +");\" title=\"ลบ\" class=\"delete-file\" style=\"position: absolute;padding-left: 5px;\">x</a>";
          }
          

          html += "</div>";
          htmlPreview.append(html);
        }

        reader.readAsDataURL(v);
      });
    }
  }

$('input#filUpload').change(function() {
  readURL(this);
});