“Предварительный просмотр нескольких изображений перед загрузкой” Ответ

Предварительный просмотр нескольких изображений перед загрузкой

function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {
    
    if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
      return alert(file.name +" is not an image");
    } // else...
    
    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {src:this.result, height:100}));
    });

    reader.readAsDataURL(file);
    
  }

}

$('#file-input').on("change", previewImages);
John Mark Tamaño

Предварительный просмотр нескольких изображений перед загрузкой

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file-input" type="file" multiple>
<div id="preview"></div>
 Run code snippetHide results
John Mark Tamaño

Ответы похожие на “Предварительный просмотр нескольких изображений перед загрузкой”

Вопросы похожие на “Предварительный просмотр нескольких изображений перед загрузкой”

Больше похожих ответов на “Предварительный просмотр нескольких изображений перед загрузкой” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования