markdown 拖放文件上传
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown 拖放文件上传相关的知识，希望对你有一定的参考价值。
/*Colors*/
/*Fonts*/
$mainFont: "Poppins", sans-serif;
$primFont: "Nunito", sans-serif;
body {
background: linear-gradient(90deg, #b784ed, #7925ed);
display: flex;
justify-content: center;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/*Reset Heading*/
h2,
h3,
p {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
/* Start Style*/
.wrapper {
//background:linear-gradient(200deg, #1e5fb3, #abbad7);
width: 1000px;
height: 600px;
margin: 10px auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
.items-border {
width: 400px;
height: 100px;
background: linear-gradient(to left, #acb1d9, #c4d3f0);
margin: auto;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
.items-upload {
width: 380px;
height: 80px;
border-radius: 15px;
background: #fff;
display: flex;
justify-content: space-around;
position: relative;
.items {
align-self: center;
color: #7d8ace;
cursor: pointer;
width: 41px;
height: 48px;
position: relative;
}
}
}
.content {
display: flex;
justify-content: space-around;
}
.upload-border,
.files-border {
width: 390px;
height: 425px;
background: linear-gradient(to left, #acb1d9, #c4d3f0);
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
overflow: hidden;
.upload {
width: 360px;
height: 400px;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h3 {
margin-bottom: 30px;
color: #616161;
font: 100 22px $mainFont;
}
.plus {
font-size: 40px;
padding: 45px;
border: 8px dashed #7d8ace;
///border-radius:50%;
margin-bottom: 30px;
color: #7d8ace;
cursor: pointer;
//background:#DDD;
&.bg-gray {
background: #ddd;
}
}
span {
color: #757575;
font: 100 14px $mainFont;
}
}
}
.files {
width: 360px;
height: 400px;
background: #fff;
border-radius: 8px;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
&__row {
margin-bottom: 30px;
position: relative;
transition: all 0.5s ease;
&.hidden {
display: none;
}
&.hold {
border: none;
}
&.invisible {
display: none;
}
.content {
display: grid;
grid-template-columns: repeat(9, 1fr);
margin-bottom: 15px;
grid-gap: 10px;
.picture {
grid-row: 1/3;
.image {
color: #7d8ace;
}
}
.text {
grid-column: 2 / -1;
display: grid;
grid-template-rows: repeat(2, 25px);
grid-gap: 15px;
.status {
display: flex;
justify-content: space-between;
p {
color: #717171;
font: 100 14px $mainFont;
}
.check,
.false {
position: relative;
}
.check {
color: #bdf351;
border-color: #bdf351;
}
.false {
color: #a0a09e;
cursor: pointer;
}
}
.progressbar {
width: 95%;
height: 5px;
background: #ddd;
border-radius: 15px;
position: relative;
.progressOrange,
.progressGreen {
position: absolute;
top: 0;
left: 0;
height: 5px;
border-radius: 15px;
//animation: upwidth 3s linear;
}
}
.progressGreen {
background: #bdf351;
width: 100%;
}
.progressOrange {
background: #f18000;
width: 5%;
}
.last-progress {
background: #f18000;
width: 1%;
}
}
}
.bar {
width: 100%;
height: 2px;
background: #ddd;
position: absolute;
bottom: 15px;
}
}
&__footer {
width: 260px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
p {
color: #a0a0a0;
font: 100 14px $mainFont;
}
}
}
}
@keyframes upwidth {
from {
width: 0;
}
to {
width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function () {
const dragIcon = document.getElementById('image');
const dropIcon = document.querySelector(".plus");
//First Icon
dragIcon.addEventListener('dragstart', dragStart);
dragIcon.addEventListener('dragend', dragEnd);
dropIcon.addEventListener('dragover', dragOver);
dropIcon.addEventListener('dragenter', dragEnter);
dropIcon.addEventListener('dragleave', dragLeave);
dropIcon.addEventListener('drop', dragDrop);
// Icon One Function
function dragStart() {
this.className += " hold";
setTimeout(() => this.className = ' invisible', 0);
}
function dragEnd() {
this.className = 'fa fa-file-image-o fa-3x image';
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter() {
this.className += " bg-gray";
}
function dragLeave() {
this.classList.remove('bg-gray');
}
function dragDrop() {
this.classList.remove('bg-gray');
$('.first').removeClass('hidden');
increaseNumber();
upWidth();
}
function upWidth() {
'use strice';
$('.first-progress').animate({
width: '100%'
},15000, function() {
change();
})
}
function increaseNumber() {
var newValue = parseInt($('#value').text());
var x = 221;
setInterval(increase, 150);
function increase() {
newValue = newValue % 360 +1;
if (newValue >= x) {
return ;
}
$('#value').text(newValue);
}
}
function change() {
if($('.two').hasClass('two')) {
$('.two').addClass('hidden');
$('.three').removeClass('hidden');
$('.first-progress').css({background: '#bdf351'});
}
}
});
<div class="wrapper">
<div class="items-border">
<div class="items-upload">
<div class="items">
<i class="fa fa-file-image-o fa-3x image" id="image" draggable="true" aria-hidden="true"></i>
</div>
<div class="items">
<i class="fa fa-file-sound-o fa-3x image" id="image1" draggable="true" aria-hidden="true"></i>
</div>
<div class="items">
<i class="fa fa-file-archive-o fa-3x image" id="image" draggable="true" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="content">
<div class="upload-border">
<div class="upload">
<h3>Drop your files here</h3>
<i class="fa fa-plus plus" id="plus" aria-hidden="true"></i>
<span>Or click on the area</span>
</div>
</div>
<div class="files-border">
<div class="files" id="files">
<div class="files__row">
<div class="content">
<div class="picture">
<i class="fa fa-file-image-o fa-3x image" aria-hidden="true"></i>
</div>
<div class="text">
<div class="status">
<p>Vacation.dng</p>
<p>Complete <i class="fa fa-check check" aria-hidden="true"></i></p>
</div>
<div class="progressbar">
<div class="progressGreen"></div>
</div>
</div>
</div>
<div class="bar"></div>
</div>
<div class="files__row first hidden">
<div class="content">
<div class="picture">
<i class="fa fa-file-audio-o fa-3x image" aria-hidden="true"></i>
</div>
<div class="text">
<div class="status">
<p>Vivaldi-Spring.m4a</p>
<p class="two"><span id="value">125</span>/220 mb <i class="fa fa-times false" id="icon" aria-hidden="true"></i></p>
<p class="three hidden">Complete <i class="fa fa-check check" aria-hidden="true"></i></p>
</div>
<div class="progressbar">
<div class="progressOrange first-progress"></div>
</div>
</div>
</div>
<div class="bar"></div>
</div>
<div class="files__row second hidden">
<div class="content">
<div class="picture">
<i class="fa fa-file-archive-o fa-3x image" aria-hidden="true"></i>
</div>
<div class="text">
<div class="status">
<p>Monthly Report.gz</p>
<p><span>233</span>/325 mb <i class="fa fa-times false" id="icon" aria-hidden="true"></i></p>
</div>
<div class="progressbar">
<div class="progressOrange last-progress"></div>
</div>
</div>
</div>
<div class="bar"></div>
</div>
<!--
<div class="files__footer">
<p> <span id="number">71% </span> completed</p>
</div>-->
</div>
</div>
</div>
</div>Drag and Drop File Upload
-------------------------
A [Pen](https://codepen.io/harunpehlivan/pen/YvrpLJ) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/YvrpLJ/license).以上是关于markdown 拖放文件上传的主要内容，如果未能解决你的问题，请参考以下文章