Загрузить файл по нажатию кнопки с предварительным просмотром с использованием JavaScript

Привет ребята. Добро пожаловать в наш блог! В сегодняшней статье мы рассмотрим, как создать Загрузить файл по нажатию кнопки с предварительным просмотром, используя HTML, CSS и JavaScript. До этого мы могли видеть, о чем идет речь.

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

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

Итак, давайте начнем наше путешествие по проекту, добавив исходные коды. Для этого мы сначала используем HTML-код.

HTML-код

<div class="container">
  <div class="card">
    <h3>Upload Files</h3>
    <div class="drop_box">
      <header>
        <h4>Select File here</h4>
      </header>
      <p>Files Supported: PDF, TEXT, DOC , DOCX</p>
      <input type="file" hidden accept=".doc,.docx,.pdf" id="fileID" style="display:none;">
      <button class="btn">Choose File</button>
    </div>
  </div>
</div>

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

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

Совсем недавно появилась кнопка для загрузки файлов из других источников. И это все для HTML; теперь мы начнем стилизовать наш проект с помощью CSS; соответствующий код приведен ниже.

HTML-вывод:

Загрузка файла кода CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
.container {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}
.card {
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 260px;
  background-color: #ffffff;
  padding: 10px 30px 40px;
}
.card h3 {
  font-size: 22px;
  font-weight: 600;
  
}
.drop_box {
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted #a3a3a3;
  border-radius: 5px;
}
.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}
.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}
.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}
.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}

Код CSS для проекта теперь добавлен правильно. В этом коде мы начинаем с использования свойства Import, чтобы добавить ссылки для семейств шрифтов, затем мы устанавливаем значения поля и отступа равными нулю, а размер и границу блока — с помощью универсальной метки (*).

После этого мы просто начинаем стилизовать весь класс Div, содержащий контейнер имен, а затем добавляем стиль границы со свойством Dotted, чтобы сделать его более привлекательным. И мы только что создали Div Class Drop-Box, который содержит необходимое содержимое для проекта загрузки файлов, и часть его содержимого может измениться.

Код для приведенного выше объяснения приведен ниже.

.container {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}
.card {
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 260px;
  background-color: #ffffff;
  padding: 10px 30px 40px;
}
.card h3 {
  font-size: 22px;
  font-weight: 600;
  
}
.drop_box {
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted #a3a3a3;
  border-radius: 5px;
}
.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}
.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}

После этого мы просто стилизовали нашу кнопку и поле ввода, чтобы отображать загруженный файл в привлекательном для пользователя виде, а кнопка после нажатия на нее должна изменить свое содержимое на «файл загружен» для этой цели, мы использовали этот код… и некоторые эффекты наведения были добавлены для элемента кнопки, и они также приведены ниже.

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}
.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}

Вывод CSS:

Теперь мы успешно завершили наш код CSS. Пришло время добавить код Java Script, и соответствующий код находится внизу.

Загрузка файла кода Javascript

const dropArea = document.querySelector(".drop_box"),
  button = dropArea.querySelector("button"),
  dragText = dropArea.querySelector("header"),
  input = dropArea.querySelector("input");
let file;
var filename;
button.onclick = () => {
  input.click();
};
input.addEventListener("change", function (e) {
  var fileName = e.target.files[0].name;
  let filedata = `
    <form action="" method="post">
    <div class="form">
    <h4>${fileName}</h4>
    <input type="email" placeholder="Enter email upload file">
    <button class="btn">Upload</button>
    </div>
    </form>`;
  dropArea.innerHTML = filedata;
});

Теперь мы успешно добавили наш код JavaScript. Здесь мы даем некоторые шаги для конкретного кода с объяснением, в котором код работает в соответствии с ним.

Шаг 1: внутри файла сценария мы сначала получаем класс Div и класс ввода с помощью свойства Js селектора запросов, которое приведено ниже.

const dropArea = document.querySelector(".drop_box"),
  button = dropArea.querySelector("button"),
  dragText = dropArea.querySelector("header"),
  input = dropArea.querySelector("input");

Шаг 2: После этого мы создаем пустую переменную для хранения значения. Теперь мы добавляем свойство события кнопки для выполнения событий после нажатия кнопки.

Затем внутри события кнопки мы просто объявляем щелчок ввода для выбора файла. Код для объяснения не работает.

let file;
var filename;
button.onclick = () => {
  input.click();
};

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

input.addEventListener("change", function (e) {
  var fileName = e.target.files[0].name;
  let filedata = `
    <form action="" method="post">
    <div class="form">
    <h4>${fileName}</h4>
    <input type="email" placeholder="Enter email upload file">
    <button class="btn">Upload</button>
    </div>
    </form>`;
  dropArea.innerHTML = filedata;
});

Теперь мы успешно завершили наш код Javascript. Итак, последнее, что осталось здесь, — это просмотреть наш проект, указанный в разделе «Вывод».

Вывод Javascript:

Теперь мы успешно создали наш Проект загрузки файлов с использованием HTML, Css и Java Script. Вы можете использовать этот проект для своих кадровых нужд, и соответствующие строки кода приведены со ссылкой на CodePen, упомянутой ниже.

Если вы узнаете, что этот блог полезен? , Затем обязательно выполните поиск кода с Random в Google для интерфейсных проектов с исходными кодами и обязательно следуйте коду со случайной страницей в Instagram.

Ссылочный код Аман Чуурасия

Написано: Рагунатан С

Что такое загружаемый файл?

Загрузочный файл — это форма функции, которая помогает пользователю загружать документ. Загрузка файлов позволяет пользователю загружать все документы, необходимые веб-сайту.

Как создать раздел загрузки файлов?

Раздел загрузки файлов создается с использованием тега формы, в котором тип ввода будет «файл».

материалы по теме:

Новые материалы

Коллекции публикаций по глубокому обучению

Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita

Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2

1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)

Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -

1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame

Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии

КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Web Development Software Development Python Coding Deep Learning AI React Software Engineering Nodejs Front End Development Java Algorithms Computer Science Typescript Data Tech Development CSS HTML Programming Languages Tutorial Angular Startup Productivity Python Programming Computer Vision Neural Networks Javascript Tips AWS Education Open Source NLP Learning Mlops