Здравствуйте, читатели! Сегодня в этом блоге вы узнаете, как предварительно просмотреть изображение перед загрузкой или кнопку загрузки файла с помощью HTML CSS и JavaScript. Ранее я поделился блогом на тему Как проверить валидацию электронной почты в JavaScript. А теперь я собираюсь создать кнопку загрузки файла.
В этой программе сначала на странице есть контейнер предварительного просмотра файлов со значком облака и кнопкой загрузки. При нажатии на кнопку выбора файла откроется новое окно для выбора изображения или файла. После выбора файла предварительный просмотр этого файла отображается в контейнере предварительного просмотра. И когда вы наведете курсор на файл, имя этого файла появится в нижней части контейнера предварительного просмотра. Также отображается кнопка отмены (крестик), и когда вы нажимаете на эту кнопку, выбранный вами файл предварительного просмотра будет скрыт или отменен.
Эта программа возможна только со свойством файлов JavaScript. Свойство files возвращает объект FileList, описывающий файл или файлы, выбранные с помощью кнопки загрузки файла. Через объект FileList вы можете получить имя, размер и содержимое файлов. Это свойство доступно только для чтения.
Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе (предварительный просмотр изображения перед загрузкой или кнопка загрузки файла).
Видеоруководство по предварительному просмотру изображения перед загрузкой
В видео вы увидели, как на самом деле работает эта программа, и я надеюсь, вы поняли основные коды, лежащие в основе создания этой программы. Как вы уже знаете, функции загрузки и предварительного просмотра этой программы возможны только с помощью JavaScript. Вы также можете создать простую кнопку загрузки файла или кнопку по умолчанию, используя только HTML-тег (файл типа ‹input›).
Если вы новичок и знаете только HTML и CSS, вы можете использовать эту программу на своем веб-сайте, в проекте и на HTML-странице. уровень.
Если вам нравится эта программа (предварительный просмотр изображения перед загрузкой) и вы хотите получить исходные коды. Вы также можете скачать файлы исходного кода по данной ссылке. Нажмите здесь, чтобы загрузить файлы с исходным кодом.
Первоначально опубликовано на https://www.codingnepalweb.com 3 июля 2020 г.
