Upload and Display

Developer
Lichi Chen
Size
2,022 Kb
Views
18,216
  1. Upload and Display Previews
  2. Upload and Display HTML Codes
  3. Upload and Display CSS Codes
  4. Upload and Display JS Codes

How do I make an upload and display?

What is a upload and display? How do you make a upload and display? This script and codes were developed by Lichi Chen on 18 October 2022, Tuesday.

Upload and Display Previews
IQ Test

Upload and Display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Upload and Display</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script>
<h1>The Web Page</h1>
<canvas id = "can">
</canvas>
<canvas id = "two">
</canvas>
<p> Filename: <input type = "text" id = "tinput"> <input type = "text" value = "upload" onclick = "upload()">
<input type = "file" multiple = "false" accept = "image/*" id = "finput" onchange = "upload1()">
<input type = "button" value = "makeGrayScale" onclick = "makeGray()">
</p> <script src="js/index.js"></script>
</body>
</html>

Upload and Display - Script Codes CSS Codes

h1 { color: darkblue;
}
canvas { width: 500px; margin: 20px; border: 5px solid lightgray;
}
finput { font-size: 14px;
}

Upload and Display - Script Codes JS Codes

function upload() { var txtinput = document.getElementById("tinput"); var txt = txtinput.value; alert("You chose" + txt);
}
var image;
var img;
function upload1() { var c = document.getElementById("can"); var imageinput = document.getElementById("finput"); image = new SimpleImage(imageinput); image.drawTo(c);
}
function makeGray() { for (var pixel of image.values()) { var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3; pixel.setRed(avg); pixel.setGreen(avg); pixel.setBlue(avg); } var t = document.getElementById("two"); image.drawTo(t);
}
Upload and Display - Script Codes
Upload and Display - Script Codes
Home Page Home
Developer Lichi Chen
Username chenlichiclc
Uploaded October 18, 2022
Rating 3
Size 2,022 Kb
Views 18,216
Do you need developer help for Upload and Display?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lichi Chen (chenlichiclc) Script Codes
Name
3
Color chooser practice-1
Color chooser practice-2
1
Draft
The Filter Page
My Interests Page
The Filter Page-3
Week 3
2
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!