Sérgio Oliveira

1638680700

Upload de arquivo com HTML CSS e barra de progresso JavaScript

Nesta postagem, você aprenderá a fazer upload de arquivos com progresso em HTML, CSS e JavaScript.

Para criar este projeto (JavaScript File Upload). Primeiro, você precisa criar quatro arquivos: arquivos HTML, CSS, JavaScript e PHP. Depois de criar esses arquivos, basta colar os seguintes códigos em seu arquivo. Lembre-se, você deve criar uma pasta chamada php e dentro desta pasta você deve criar um arquivo php chamado upload.php e uma pasta de arquivos para salvar todos os arquivos carregados.

Se você não entender, pode fazer o download dos arquivos de origem do JavaScript. Carregar este arquivo usando a barra de progresso do botão de download fornecido.

Primeiro, crie um arquivo HTML com o nome index.html e cole os códigos fornecidos em seu arquivo HTML. Lembre-se de que você deve criar um arquivo com a extensão .html.

<!DOCTYPE html>
<!-- Coding By Codequs - youtube.com/codequs -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload JavaScript with Progress Ba | Codequs</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>File Uploader JavaScript</header>
    <form action="#">
      <input class="file-input" type="file" name="file" hidden>
      <i class="fas fa-cloud-upload-alt"></i>
      <p>Browse File to Upload</p>
    </form>
    <section class="progress-area"></section>
    <section class="uploaded-area"></section>
  </div>

  <script src="script.js"></script>

</body>
</html>

Em segundo lugar, crie um arquivo CSS com o nome style.css e cole os códigos fornecidos em seu arquivo CSS. Lembre-se de que você deve criar um arquivo com a extensão .css.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #6990F2;
}

::selection{
  color: #fff;
  background: #6990F2;
}
.wrapper{
  width: 430px;
  background: #fff;
  border-radius: 5px;
  padding: 30px;
  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
}
.wrapper header{
  color: #6990F2;
  font-size: 27px;
  font-weight: 600;
  text-align: center;
}
.wrapper form{
  height: 167px;
  display: flex;
  cursor: pointer;
  margin: 30px 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 5px;
  border: 2px dashed #6990F2;
}
form :where(i, p){
  color: #6990F2;
}
form i{
  font-size: 50px;
}
form p{
  margin-top: 15px;
  font-size: 16px;
}

section .row{
  margin-bottom: 10px;
  background: #E9F0FF;
  list-style: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section .row i{
  color: #6990F2;
  font-size: 30px;
}
section .details span{
  font-size: 14px;
}
.progress-area .row .content{
  width: 100%;
  margin-left: 15px;
}
.progress-area .details{
  display: flex;
  align-items: center;
  margin-bottom: 7px;
  justify-content: space-between;
}
.progress-area .content .progress-bar{
  height: 6px;
  width: 100%;
  margin-bottom: 4px;
  background: #fff;
  border-radius: 30px;
}
.content .progress-bar .progress{
  height: 100%;
  width: 0%;
  background: #6990F2;
  border-radius: inherit;
}
.uploaded-area{
  max-height: 232px;
  overflow-y: scroll;
}
.uploaded-area.onprogress{
  max-height: 150px;
}
.uploaded-area::-webkit-scrollbar{
  width: 0px;
}
.uploaded-area .row .content{
  display: flex;
  align-items: center;
}
.uploaded-area .row .details{
  display: flex;
  margin-left: 15px;
  flex-direction: column;
}
.uploaded-area .row .details .size{
  color: #404040;
  font-size: 11px;
}
.uploaded-area i.fa-check{
  font-size: 16px;
}

Terceiro, crie um arquivo JavaScript com o nome script.js e cole os códigos fornecidos em seu arquivo JavaScript. Lembre-se de que você deve criar um arquivo .js.

const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");

form.addEventListener("click", () =>{
  fileInput.click();
});

fileInput.onchange = ({target})=>{
  let file = target.files[0];
  if(file){
    let fileName = file.name;
    if(fileName.length >= 12){
      let splitName = fileName.split('.');
      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
    }
    uploadFile(fileName);
  }
}

function uploadFile(name){
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "php/upload.php");
  xhr.upload.addEventListener("progress", ({loaded, total}) =>{
    let fileLoaded = Math.floor((loaded / total) * 100);
    let fileTotal = Math.floor(total / 1000);
    let fileSize;
    (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
    let progressHTML = `<li class="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content">
                            <div class="details">
                              <span class="name">${name} • Uploading</span>
                              <span class="percent">${fileLoaded}%</span>
                            </div>
                            <div class="progress-bar">
                              <div class="progress" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
    uploadedArea.classList.add("onprogress");
    progressArea.innerHTML = progressHTML;
    if(loaded == total){
      progressArea.innerHTML = "";
      let uploadedHTML = `<li class="row">
                            <div class="content upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details">
                                <span class="name">${name} • Uploaded</span>
                                <span class="size">${fileSize}</span>
                              </div>
                            </div>
                            <i class="fas fa-check"></i>
                          </li>`;
      uploadedArea.classList.remove("onprogress");
      uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
    }
  });
  let data = new FormData(form);
  xhr.send(data);
}

Finalmente, crie um arquivo PHP chamado message.php e cole os códigos fornecidos em seu arquivo PHP. Lembre-se, você deve criar um arquivo com a extensão .php.

<?php
  $file_name =  $_FILES['file']['name'];
  $tmp_name = $_FILES['file']['tmp_name'];
  $file_up_name = time().$file_name;
  move_uploaded_file($tmp_name, "files/".$file_up_name);
?>

É isso, agora você criou com sucesso o JavaScript para upload de arquivos com barra de progresso. Se o seu código não estiver funcionando ou se você enfrentar algum erro / problema, baixe os arquivos do código-fonte no botão de download fornecido. É gratuito e um arquivo .zip será baixado e depois descompactado. Depois de descompactá-lo, mova esta pasta de projeto dentro de htdocs ou pasta www de XAMPP ou pasta de instalação WAMP e inicie o servidor apache e execute este arquivo em seu navegador.

What is GEEK

Buddha Community

Lyda White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Web Monster

Web Monster

1677108125

Creating a Responsive Blog with HTML, CSS, and JavaScript

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video 

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step. 

 

From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript, 

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger, 

web developer, or simply looking to learn new skills, this tutorial is for you! 

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience. 

🔔 Subscribe for more! 

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/KO0VqqK

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

 🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial. 

 

So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!

 

Link of The Video :

https://youtu.be/BqgWIel4uuU

Saurabh Kumar

Saurabh Kumar

1671267560

Personal Portfolio Website Using Html Css and Javascript

#HTML #CSS #JavaScript 

In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function

 ∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website

Features : -

  • Fully Responsive 
  • Dark mode/light mode
  • Browser compatibility
  • Social Media Icon
  • and many more

#css  #html  #javascript 

 

 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial