Как сделать первое выбранное изображение миниатюрным изображением из списка изображений в jquery?

Здесь, когда пользователь выбирает изображения, он добавляется внутри тега ul. Все это работает нормально (в приведенном ниже коде все еще могут быть некоторые проблемы, так как я очень новичок в jquery).

Теперь, что я хочу здесь изменить, это то, что изображение, которое выбирается сначала, будет иметь <li class='thumbnail'> по умолчанию, тогда другие оставшиеся выбранные изображения не будут иметь этот класс thumbnail в теге li. Но позже пользователь может изменить миниатюру изображения, щелкнув изображение. Как я могу сделать это здесь?

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
            img = `
            <li class = "thumbnail">
             <div class = "image">
            <img src = "${e.target.result}" width = "83" height = "100"/>
            <div class = "close"><div class = "ic-close" id = "img-remove"></div>
            </div>
            <p>Thumbnail</p></li>
           `
            $('#blah').append(img);

            if ( $('ul#blah li').length > 5 ) {
            $("#blah li:last-child").remove();
            alert("You can't upload more than 5 images.");           
            }
            }
            reader.readAsDataURL(input.files[0]);

             $('ul#blah').on('click','.ic-close',function(e) {
                 console.info('k');
                  $(this).closest('li').remove();
                  });

        }
    }
    $("#imgInp").change(function(){
        readURL(this);
    });
    

</script>

HTML

<div class = "col-md-6 form-group">
<label for = "">Upload Image</label>
 <ul class = "list list-inline" id = "blah">
<div class = "files--upload"><input name='image' class = "d-none imgUpload" type = "file"                                                                     
 id = "imgInp" placeholder = ""/><label class = "upload-label" for = "imgInp">
<div class = "ic-add"></div>
  <div class = "mt-2">Add Photo</div>
</label></div>
</ul>
</div>

вы хотите добавить html?

s.kuznetsov 14.12.2020 12:36

на самом деле, неважно, короткий или длинный тот или иной код, желательно добавить этот код в вопрос. Так же, как когда код в комплекте, это упрощает работу программиста. Еще лучше, если вы сделаете воспроизводимый код.

s.kuznetsov 14.12.2020 12:50

ваш код добавляет тег img к тегу img.

s.kuznetsov 14.12.2020 12:57

@sergeykuznetsov Я только что обновил свой html

D_P 14.12.2020 12:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
153
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из самых простых способов загрузки превью — быстрый счетчик, который запретит последующие загрузки в превью.

Я объявил глобально переменную:

var prew = true;

Здесь происходит разовое добавление изображения для превью, а также, prew присваивается false, что означает невозможность дальнейшего добавления изображения к этому div (#img_prew).

if (prew) {
   $('#img_prew').append(img);
   $('#img_prew').find('.thumbnail .image p').text('This is a preview');
   prew = false;
} 

Создал div для предварительного просмотра:

<div id = "img_prew">...</div>

И в конце задаю ширину и высоту через css:

#img_prew img{
  width: 300px;
  height: 300px;
}

var prew = true;

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            

            reader.onload = function (e) {
                        
            img = `
            <li class = "thumbnail">
             <div class = "image">
            <img src = "${e.target.result}" width = "83" height = "100"/>
            <div class = "close"><div class = "ic-close" id = "img-remove"></div>
            </div>
            <p>Thumbnail</p></li>
           `
            if (prew) {
              $('#img_prew').append(img);
              $('#img_prew').find('.thumbnail .image p').text('This is a preview');
                prew = false;
            } 
            
            $('#blah').append(img);

            if ( $('ul#blah li').length > 5 ) {
            $("#blah li:last-child").remove();
            alert("You can't upload more than 5 images.");           
            }
            }
            reader.readAsDataURL(input.files[0]);

             $('ul#blah').on('click','.ic-close',function(e) {
                 console.info('k');
                  $(this).closest('li').remove();
                  });

        }
    }
    $("#imgInp").change(function(){
        readURL(this);
    });
#img_prew img{
  width: 300px;
  height: 300px;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.js"></script>

<div class = "col-md-6 form-group">
<label for = "">Upload Image</label>
<div id = "img_prew"></div>
 <ul class = "list list-inline" id = "blah">
<div class = "files--upload"><input name='image' class = "d-none imgUpload" type = "file"                                                                     
 id = "imgInp" placeholder = ""/><label class = "upload-label" for = "imgInp">
<div class = "ic-add"></div>
  <div class = "mt-2">Add Photo</div>
</label></div>
</ul>
</div>

Теперь я столкнулся с другой проблемой: я не могу передать эти выбранные файлы изображений в серверную часть. Только первое изображение, которое было выбрано сначала, отправляется на серверную часть. У вас есть идеи, почему это может произойти?

D_P 14.12.2020 14:23

Покажите мне, как вы передаете изображения на сервер.

s.kuznetsov 14.12.2020 14:25

Я использую этот атрибут входного имени для файлов <input name='image' type = "file"

D_P 14.12.2020 14:26

нет, я имею в виду что-то вроде этого - stackoverflow.com/questions/41250223/…

s.kuznetsov 14.12.2020 14:28

Давайте продолжим обсуждение в чате.

D_P 14.12.2020 14:30

Другие вопросы по теме