2 keer 1 foto pre-viewen
Ik heb dit gevonden, maar hierbij word elke keer de foto over elkaar geplaatst.
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById("output");
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
<html>
<input type="file" name="foto1" accept="image/*" onchange="loadFile(event)">
<img src="" id="output" style="max-height:150px;"/>
<input type="file" name="foto2" accept="image/*" onchange="loadFile(event)">
<img src="" id="output" style="max-height:150px;"/>
</html>
<script>
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById("output1");
var output = document.getElementById("output2");
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
</script>
<input type="file" name="foto1" accept="image/*" onchange="loadFile(event)">
<img src="" id="output1" style="max-height:150px;"/>
<input type="file" name="foto2" accept="image/*" onchange="loadFile(event)">
<img src="" id="output2" style="max-height:150px;"/>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<title>Selecteer en laat zien script</title>
<style>
.thumb {
height: 200px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
<html>
<head>
<title>Selecteer en laat zien script</title>
<style>
.thumb {
height: 200px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
Gewijzigd op 07/03/2019 10:15:12 door Bart V B
Nu wil ik de gekozen foto's nog als variabele gebruiken in PHP.
Wee je misschien ook hoe ik die uit dit script haal?
bvd
Toevoeging op 07/03/2019 20:06:29:
hoi, ik bedoel dat ik de bestandsnaam van de de ge-pre-viewde fotos wil gebruiken om op te slaan in een database. Daarom zou ik deze uit het javascript willen halen.
Hoe ik dat dan verder met php afhandel gaat me wel lukken.
Ik weet nu alleen niet als ik bijv 3 fotos pré-view, hoe ik die bestandsnamen kan 'echoen'.
Als ik daar uit ben, ben ik ontzettend geholpen.
bedankt alvast.
Dus zoiets?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<title>Jquery selecteer en laat zien script</title>
<style>
.thumb {
height: 200px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<pre>';
print_r($_FILES);
echo '</pre>';
}
?>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<input type="submit" value="upload">
</form>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
<html>
<head>
<title>Jquery selecteer en laat zien script</title>
<style>
.thumb {
height: 200px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Selecteer met muis en shift je foto's.</p>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<pre>';
print_r($_FILES);
echo '</pre>';
}
?>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<input type="submit" value="upload">
</form>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
if( window.FileReader ) {
document.write('<p>The browser does support the FileReader Object</p>');
} else {
document.write('<p>The browser doesn\'t support the FileReader Object</p>');
}
if( window.File ) {
document.write('<p>The browser does support the File Object</p>');
} else {
document.write('<p>The browser doesn\'t support the File Object</p>');
}
if( window.FileList ) {
document.write('<p>The browser does support the FileList Object</p>');
} else {
document.write('<p>The browser doesn\'t support the FileList Object</p>');
}
if( window.Blob ) {
document.write('<p>The browser does support the Blob Object</p>');
} else {
document.write('<p>The browser doesn\'t support the Blob Object</p>');
}
</script>
<hr>
<h3><a href="http://www.javascripture.com/FileList">http://www.javascripture.com/FileList</a></h3>
<input id='file-input_1' type='file' multiple>
<p id="file-output_1"></p>
<script>
var fileInput1 = document.getElementById('file-input_1');
var fileOutput1 = document.getElementById('file-output_1');
fileInput1.addEventListener('change', function(event) {
var input = event.target;
var output = '';
for (var i = 0; i < input.files.length; i++)
{
output += input.files[i].name + '<br />';
}
fileOutput1.innerHTML = output;
});
</script>
if( window.FileReader ) {
document.write('<p>The browser does support the FileReader Object</p>');
} else {
document.write('<p>The browser doesn\'t support the FileReader Object</p>');
}
if( window.File ) {
document.write('<p>The browser does support the File Object</p>');
} else {
document.write('<p>The browser doesn\'t support the File Object</p>');
}
if( window.FileList ) {
document.write('<p>The browser does support the FileList Object</p>');
} else {
document.write('<p>The browser doesn\'t support the FileList Object</p>');
}
if( window.Blob ) {
document.write('<p>The browser does support the Blob Object</p>');
} else {
document.write('<p>The browser doesn\'t support the Blob Object</p>');
}
</script>
<hr>
<h3><a href="http://www.javascripture.com/FileList">http://www.javascripture.com/FileList</a></h3>
<input id='file-input_1' type='file' multiple>
<p id="file-output_1"></p>
<script>
var fileInput1 = document.getElementById('file-input_1');
var fileOutput1 = document.getElementById('file-output_1');
fileInput1.addEventListener('change', function(event) {
var input = event.target;
var output = '';
for (var i = 0; i < input.files.length; i++)
{
output += input.files[i].name + '<br />';
}
fileOutput1.innerHTML = output;
});
</script>