Skip to content

Commit 7d6a8d0

Browse files
chrisdavidmillschrisdavidmills
committed
adding input type file examples
1 parent 14ca315 commit 7d6a8d0

File tree

4 files changed

+189
-3
lines changed

4 files changed

+189
-3
lines changed

‎accessibility/aria/website-aria-roles/style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,15 @@ input {
101101

102102
input[type="search"] {
103103
flex: 3;
104-
}
104+
}
105105

106106
input[type="submit"] {
107107
flex: 1;
108108
margin-left: 1rem;
109109
background: #333;
110110
border: 0;
111-
color: white;
112-
}
111+
color: white;
112+
}
113113

114114
/* || main layout */
115115

‎html/forms/file-examples/file-example.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Complete file example</title>
5+
<style>
6+
form {
7+
width: 600px;
8+
background: #ccc;
9+
margin: 0 auto;
10+
padding: 20px;
11+
}
12+
13+
form ol {
14+
padding-left: 0;
15+
}
16+
17+
form li {
18+
background: #eee;
19+
display: flex;
20+
justify-content: space-between;
21+
margin-bottom: 10px;
22+
list-style-type: none;
23+
}
24+
25+
form img {
26+
height: 64px;
27+
margin-left; 20px;
28+
order: 1;
29+
}
30+
31+
form p {
32+
line-height: 32px;
33+
padding-left: 10px;
34+
}
35+
36+
form label, form button {
37+
background-color: black;
38+
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.4) 40%, rgba(255, 0, 0, 0.4) 60%, rgba(255, 0, 0, 0));
39+
color: #ccc;
40+
padding: 5px 10px;
41+
border-radius: 5px;
42+
border: 1px ridge gray;
43+
}
44+
45+
form label:hover, form button:hover {
46+
background-color: #222;
47+
}
48+
49+
form label:active, form button:active {
50+
background-color: #333;
51+
}
52+
</style>
53+
</head>
54+
<body>
55+
<form>
56+
<div>
57+
<label for="image_uploads">Choose images to upload (PNG, JPG)</label>
58+
<input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
59+
</div>
60+
<div class="preview">
61+
<p>No files currently selected for upload</p>
62+
</div>
63+
<div>
64+
<button>Submit</button>
65+
</div>
66+
</form>
67+
<script>
68+
var input = document.querySelector('input');
69+
var preview = document.querySelector('.preview');
70+
71+
input.style.visibility = 'hidden';
72+
73+
input.addEventListener('change', updateImageDisplay);
74+
75+
function updateImageDisplay() {
76+
while(preview.firstChild) {
77+
preview.removeChild(preview.firstChild);
78+
}
79+
80+
var curFiles = input.files;
81+
if(curFiles.length === 0) {
82+
var para = document.createElement('p');
83+
para.textContent = 'No files currently selected for upload';
84+
preview.appendChild(para);
85+
} else {
86+
var list = document.createElement('ol');
87+
preview.appendChild(list);
88+
for(var i = 0; i < curFiles.length; i++) {
89+
var listItem = document.createElement('li');
90+
var para = document.createElement('p');
91+
if(validFileType(curFiles[i])) {
92+
para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
93+
var image = document.createElement('img');
94+
image.src = window.URL.createObjectURL(curFiles[i]);
95+
96+
listItem.appendChild(image);
97+
listItem.appendChild(para);
98+
99+
} else {
100+
para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
101+
listItem.appendChild(para);
102+
}
103+
104+
list.appendChild(listItem);
105+
}
106+
}
107+
}
108+
109+
var fileTypes = [
110+
'image/jpeg',
111+
'image/pjpeg',
112+
'image/png'
113+
]
114+
115+
function validFileType(file) {
116+
for(var i = 0; i < fileTypes.length; i++) {
117+
if(file.type === fileTypes[i]) {
118+
return true;
119+
}
120+
}
121+
122+
return false;
123+
}
124+
125+
function returnFileSize(number) {
126+
if(number < 1024) {
127+
return number + 'bytes';
128+
} else if(number > 1024 && number < 1048576) {
129+
return (number/1024).toFixed(1) + 'KB';
130+
} else if(number > 1048576) {
131+
return (number/1048576).toFixed(1) + 'MB';
132+
}
133+
}
134+
</script>
135+
</body>
136+
</html>

‎html/forms/file-examples/file-with-accept.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>File upload example with accept</title>
5+
<style>
6+
div {
7+
margin-bottom: 10px;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
<form>
13+
<div>
14+
<label for="profile_pic">Choose file to upload</label>
15+
<input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png">
16+
</div>
17+
<div>
18+
<button>Submit</button>
19+
</div>
20+
</form>
21+
<script>
22+
var test = document.querySelector('input');
23+
</script>
24+
</body>
25+
</html>

‎html/forms/file-examples/simple-file.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>File upload example</title>
5+
<style>
6+
div {
7+
margin-bottom: 10px;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
<form>
13+
<div>
14+
<label for="file">Choose file to upload</label>
15+
<input type="file" id="file" name="file" multiple>
16+
</div>
17+
<div>
18+
<button>Submit</button>
19+
</div>
20+
</form>
21+
<script>
22+
var test = document.querySelector('input');
23+
</script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)