Html5 реализует функции загрузки одного и нескольких изображений.

Предисловие

Сегодня мы поговорим о загрузке изображений, одного или нескольких. В настоящее время существует бесчисленное множество основных плагинов для загрузки изображений, таких как: verupload.js Jquery, jQuery File Upload, Uploadify, jQuery.filter и так далее. Но. Сегодня мы не будем говорить об упомянутых выше плагинах. Давайте посмотрим, как использовать FileReader в HTML5 для реализации предварительного просмотра одного и нескольких изображений, удаления, загрузки и других функций. Давайте посмотрим на эффект после реализации:

Это кнопка, которую нажимает пользователь. Наше самое важное предложение — это тип ввода = файл и указан атрибут Multiple, который может удовлетворить потребности в загрузке нескольких изображений.

 <div class=form-group form-row> <label class=col-sm-2 control-label uText>Клубный альбом</label><div class=row> <div class=col-xs-10 col-sm- 8 mTop5> <label <тип ввода=файл Accept=изображение/* name=ClubImagesUpload id=ClubImagesUpload class=hide Multiple=multiple> <img src=/Images/registerNewSite/btn_addimg.png class=addImg/> </label> </div> </div></div>

Область ниже используется для предварительного просмотра изображения.

 <div class=form-group form-row id=preViewMore><div class=row> <div class=col-xs-9> <div id=clubInputImagePreview class=col-sm-9 img-preview img-preview-sm >/div> </div> </div></div>

Что? Вам даже придется взглянуть на стиль, чтобы понять, гуманен ли он по-прежнему (кривая улыбка)

Для начала разберем html выше. Мы используем метку для переноса ввода и тег img. Мы надеемся, что при нажатии на + картинку в рендеринге появится диалоговое окно выбора фотографий. Следовательно, нам нужно дать. сначала нажмите метку: событие Click:

 $(#btnClubImg).click(function() { //Что-то сделать});

Давайте посмотрим на это дальше, поскольку мы хотим получить загруженный файл, а наш файл в основном находится на входе, поэтому сначала мы получаем входной тег:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input);//Распечатать текущий элемент});

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

Раскрыв первый элемент, мы обнаружим, что длина в файлах равна 0.

Хорошо, давайте продолжим анализ, потому что мы хотим иметь возможность получить текущий выбранный файл при изменении поля ввода. Проще говоря, когда файл выбран, мы можем получить текущий выбранный файл. Это то же самое, что и получение. ввод текста в поле ввода. Таким образом, после анализа мы знаем, что нам нужно добавить событие изменения в тег ввода:

 $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload); console.log($input); $input.on(change, function () { console.log(this);// Распечатать измененный текущий элемент});});

Давайте посмотрим и узнаем, что находится внутри измененного элемента ввода:

Здесь ясно видно, что мы получили выбранное изображение, включая событие последнего изменения, имя изображения, размер и тип изображения (по типу файла мы можем судить, выбирает ли текущий пользователь изображение, верно? (косящаяся улыбка) )) Опять же, это для одного файла. Если файлов несколько, файлов будет несколько.

Посмотрев вниз, мы видим на распечатке, что у нас есть нужная информация о файле в элементе files входного тега, нам просто нужно ее получить:

 вар файлы = this.files; вар длина = files.length;

Таким образом мы можем получить все файлы и их количество. Тогда возникает вопрос: если мы выберем несколько файлов, что, если мы выведем их один за другим и отобразим на странице? Когда вы увидели четыре слова, отмеченные выше, мелькнули ли в вашей голове два слова? цикл

 $.each(files, function (key, value) { //TOTO Something });

Просматривая файлы, полученные выше, мы можем получить информацию о каждом файле по очереди. Таким образом, вы сможете не только выводить их один за другим, но и при желании отправлять их на небеса~

 var fileReader = new FileReader();//Создаем экземпляр объекта FileReader var file_ = files[key];//Получаем текущий файл if (/^image///w+$/.test(file_.type)) {// Выполните регулярное сопоставление текущего файла, чтобы увидеть, является ли это выбранным изображением fileReader.onload = function() {//Вызывается после завершения операции чтения} }

Необходимо расширить знания FileReader:

FileReader в основном используется для чтения содержимого файла в память. Через ряд асинхронных интерфейсов можно получить доступ к локальным файлам в основном потоке.

Используя объекты FileReader, веб-приложения могут асинхронно читать содержимое файлов (или буферов необработанных данных), хранящихся на компьютере пользователя. Вы можете использовать объекты File или объекты Blob, чтобы указать файлы или данные, подлежащие обработке.

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

$(#clubInputImagePreview).css(background-image, url( + this.result + ));

Давайте распечатаем this.result, чтобы посмотреть, что это такое:

Само собой разумеется, что изображение преобразуется в формат данных Base64. Наконец, мы вызываем readAsDataURL, чтобы прочитать содержимое файла и представить его в виде строки data:url.

fileReader.readAsDataURL(value);

Таким образом, вы можете получить простую демонстрационную версию загрузки изображений, но она не окончательная, потому что вам еще нужно добавить много бизнеса. Например: после получения изображения для предварительного просмотра текущая метка будет занята. Если вы в следующий раз войдете в цикл и напрямую воспользуетесь исходной меткой, предыдущее изображение обязательно будет заменено. Мы надеемся, что это определенно не тот эффект, который нам нужен. иметь возможность отображать его последовательно, а не заменять дисплей. Итак, нам еще нужно выполнить некоторую обработку:

 $(#clubInputImagePreview).css(background-image, url( + this.result + ));//Используйте apend для добавления дочернего узла под текущим элементом $(#clubInputImagePreview).append(<img src='/Images / RegisterNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />);//Используйте after, чтобы добавить родственный узел к текущему родственному узлу $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img - предварительный просмотр-sm delImg' ></div>);

Затем, когда мы добавляем удаленное изображение, нам также нужно назначить ему событие щелчка, чтобы наша текущая область предварительного просмотра исчезла:

 $(#ImgRemove).click(function () { $(this).parent().remove();});

В конце концов вы обнаружите, что результат не тот, который нам нужен. Это связано с тем, что текущий идентификатор все еще существует, поэтому следующий шаг невозможно выполнить. Нам нужно только удалить идентификатор текущего элемента, а затем добавить его. элемент с тем же идентификатором, поэтому браузер подумает, что это новый элемент:

 $input.removeAttr(id); var newInput ='<input type=file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide Multiple=multiple>'; $(this).append($(newInput));

Окончательный полный код JS выглядит следующим образом:

 var intP = 0; $(#btnClubImg).click(function() { var $input = $(#ClubImagesUpload);// console.log($input); $input.on(change, function () {// console.log(this); var files = this.files; var length = files.length; if (intP > 8) { Layer.msg('Больше картинок~', {}); return; } $.each(files, function (key, value) { var fileReader = new FileReader(); var file_ = files[key]; if (/^image///w+$/.test( file_.type)) { fileReader.onload = function() { if (intP > 8) { Layer.msg('Нет больше картинок~', {}); if (key == 0 &&); intP == 0) { console.log(this.result); $(#clubInputImagePreview).css(background-image, url( + this.result + )); $(#clubInputImagePreview).append( <img src=' /Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />); $(#clubInputImagePreview).after( <div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div> } else { $(#clubInputImagePreview + parseInt(intP) + ).css(background-image, url( + this.result + )); $(#clubInputImagePreview + parseInt(intP) + ).append( <img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove + parseInt(parseInt( 1) + parseInt(intP)) +' />); $(#clubInputImagePreview + parseInt(intP) + ).after( <div id='clubInputImagePreview + parseInt(parseInt(1) + parseInt(intP)) + 'class='col-sm-9 img-preview img-preview- sm delImg' ></div> } if (key == 0 && intP == 0) { $(#ImgRemove).click(function () { $(this).parent().remove(); } } else { $(#ImgRemove + parseInt(parseInt(1) + parseInt(intP)) + ) .click(function () { $(this).parent().remove(); } } intP += parseInt(1 }); fileReader.readAsDataURL(value); else { Layer.msg(Ошибка формата<br/>Пожалуйста, выберите файл изображения) $input.removeAttr(id); var newInput = '<input type=); file Accept=image/* name=ClubImagesUpload id=ClubImagesUpload class=hide Multiple=multiple>'; $(this).append($(newInput) });

Выше представлена ​​реализация функций загрузки одного и нескольких изображений в HTML5, представленная редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя!