File Drag And Drop Upload Image Preview Javascript Before Stor

0

web-beast.com June 20, 2021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML VS CSS</title>
    <STyle>

.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
	color: #333;
	font-family: "Open Sans", Helvetica, sans-serif;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 260px;
	border-radius: 3px;
	box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.2);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
}



h1 {
	font-size: 16px;
	font-weight: 300;
	color: #666;
}

.dropzone {
	width: 200px;
	height: 150px;

	border-radius: 3px;
	text-align: center;
}

.upload-icon {
	margin: 25px 2px 2px 2px;
}

.upload-input {
	position: relative;
	top: -62px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.btn {
	display: block;
	width: 140px;
	height: 40px;
	background: rgb(255, 208, 0);
	color: #fff;
	border-radius: 3px;
	border: 0;
	box-shadow: 0 3px 0 0 rgb(43, 255, 0);
	transition: all 0.3s ease-in-out;
	font-size: 14px;
}



img{
    width: 200PX;
}
H2{
    text-align: center;
    font-size: 50px;
}
    </STyle>
</head>
<body>
    <h2>HTML VS CSS</h2>
    <div class="frame">
        <div class="center">
            <div class="title">
                <h1>Drop file to upload</h1>
            </div>
    
            <div class="dropzone">
                <img src="http://100dayscss.com/codepen/upload.svg" class="upload-icon"  id="REP"/>
                <input type="file" class="upload-input"  id="img"/>
            </div>
     
            <button type="button" class="btn" name="uploadbutton"><b>Upload file</b></button>
    
        </div>
    </div>
  
</body>
<SCript>
    img.onchange = evt => {
  const [file] = img.files
  if (file) {
    REP.src = URL.createObjectURL(file)
  }
}
</SCript>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML VS CSS</title>
    <STyle>

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    color: #333;
    font-family: "Open Sans", Helvetica, sans-serif;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 260px;
    border-radius: 3px;
    box-shadow: 8px 10px 15px 0 rgba(0, 0, 0, 0.2);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}



h1 {
    font-size: 16px;
    font-weight: 300;
    color: #666;
}

.dropzone {
    width: 200px;
    height: 150px;

    border-radius: 3px;
    text-align: center;
}

.upload-icon {
    margin: 25px 2px 2px 2px;
}

.upload-input {
    position: relative;
    top: -62px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.btn {
    display: block;
    width: 140px;
    height: 40px;
    background: rgb(255, 208, 0);
    color: #fff;
    border-radius: 3px;
    border: 0;
    box-shadow: 0 3px 0 0 rgb(43, 255, 0);
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}



img{
    width: 200PX;
}
H2{
    text-align: center;
    font-size: 50px;
}
    </STyle>
</head>
<body>
    <h2>HTML VS CSS</h2>
    <div class="frame">
        <div class="center">
            <div class="title">
                <h1>Drop file to upload</h1>
            </div>
    
            <div class="dropzone">
                <img src="http://100dayscss.com/codepen/upload.svg" class="upload-icon"  id="REP"/>
                <input type="file" class="upload-input"  id="img"/>
            </div>
     
            <button type="button" class="btn" name="uploadbutton"><b>Upload file</b></button>
    
        </div>
    </div>
  
</body>
<SCript>
    img.onchange = evt => {
  const [file] = img.files
  if (file) {
    REP.src = URL.createObjectURL(file)
  }
}
</SCript>
</html>

File Drag And Drop Upload
Drag And Drop File Upload Bootstrap
Drag And Drop File Upload Codepen
Drag And Drop File Upload Tutorial
Drag And Drop File Upload Example
Drag And Drop File Upload With Submit Button
Html5 Drag And Drop File Upload
Drag And Drop File Upload Codepen
Drag And Drop Image Preview Javascript

How To Use This Cord

steps

Fast One Copy Html File.
Copy CSS File And Past Head Part Top Fo Html File.
File Save Name.html
Ran Html File
Ready To Use

Tags

Cordpen css freedownload Github html inputtype js SectionDesign SimpleExample template web-beast.com

Newer
Older

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.