Загрузка нескольких файлов для отображения только имен файлов - PullRequest
Новая
       16

Загрузка нескольких файлов для отображения только имен файлов

0 голосов
/ 01 ноября 2018

Мне нужно получить JSFIDDLE DEMO , чтобы сохранить возможность загружать несколько файлов, но вместо предварительного просмотра мне нужно отображать только несколько имен файлов.

Вот JSFIDDLE JS, используемый для загрузки файлов: 

$(document).ready(function() {
   if (window.File && window.FileList && 
window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File 
API")
  }
});

Кроме того, мне нужно иметь возможность загружать только следующие типы файлов: .jpg, .png, .pdf, .xlsx и .docx.

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 01 ноября 2018
  1. Если вы просто хотите показать имена файлов, вам не нужно использовать тег img. Вы можете изменить код следующим образом. 

    if (window.File && window.FileList && window.FileReader) {
                    $("#files").on("change", function (e) {
                        var files = e.target.files,
                            filesLength = files.length;
                        for (var i = 0; i < filesLength; i++) {
                            var f = files[i];
                            $("<span class=\"pip\">" +
                                    "<br/><span class=\"remove\"><i class='fa fa-times'></i>"+ f.name + "</span>" +
                                    "</span>").insertAfter("#files");
                                $(".remove").click(function () {
                                    $(this).parent(".pip").remove();
                                });
                        }
                    });
                } else {
                    alert("Your browser doesn't support to File API")
                }
  1. А для второго вопроса вы можете определить принятые типы в html как 

<div class="file-loading">
                                        <input type="file" id="files" name="files[]" multiple accept=".jpg,.png,.pdf,.xlsx,.docx"/>
                                    </div>
...