Plaatje bij Input
Is het met Javascript mogelijk om naast de <input type="file"> het geselecteerde plaatje te laten zien?
SanThe.
http://jsfiddle.net/d3H9f/9/
(is alleen jQuery wat ik vond, maar kan zeker zonder dit)
Het voorbeeld in de laatste link heb ik hier aan de praat.
Dus dat gaat wel lukken.
Bedankt.
SanThe.
Gewijzigd op 06/01/2016 11:24:17 door - SanThe -
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function bla(inputID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageArea.src = reader.result;
}
reader.readAsDataURL(file);
}
}
</script>
<div id="page-wrapper">
<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput" onchange="bla('fileInput');">
</div>
<img id="imageArea" src="" />
</div>
function bla(inputID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageArea.src = reader.result;
}
reader.readAsDataURL(file);
}
}
</script>
<div id="page-wrapper">
<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput" onchange="bla('fileInput');">
</div>
<img id="imageArea" src="" />
</div>
En dit niet?
Het verschil is de parameter.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function bla(inputID, imageID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
</script>
<div id="page-wrapper">
<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput" onchange="bla('fileInput','imageArea');">
</div>
<img id="imageArea" src="" />
</div>
function bla(inputID, imageID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
</script>
<div id="page-wrapper">
<h1>Image File Reader</h1>
<div>
Select an image file:
<input type="file" id="fileInput" onchange="bla('fileInput','imageArea');">
</div>
<img id="imageArea" src="" />
</div>
doe eens document.getElementById('') ervoor, voordat je het een src probeert te geven.
Code (php)
1
2
2
console.log(imageID);
console.log(document.getElementById(imageID));
console.log(document.getElementById(imageID));
Als je dit bovenaan je functie zet, zie je het verschil.
Gewijzigd op 06/01/2016 13:05:33 door Randy vsf
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function bla(inputID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
var imageID = document.querySelector('img');
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
var imageID = document.querySelector('img');
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
Edit: Geen idee wat je met ImageID wilt doen, maar als het enkel is om te tonen, denk ik niet dat het nodig is om dat parameter mee te geven.
Gewijzigd op 06/01/2016 13:07:19 door DavY -
DavY - op 06/01/2016 13:05:15:
Edit: Geen idee wat je met ImageID wilt doen, maar als het enkel is om te tonen, denk ik niet dat het nodig is om dat parameter mee te geven.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function bla(inputID)
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
var imageID = document.querySelector('img');
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
{
var fileInput = document.getElementById(inputID);
var file = fileInput.files[0];
var imageType = /image.*/;
var imageID = document.querySelector('img');
if (file.type.match(imageType))
{
var reader = new FileReader();
reader.onload = function(e) {
imageID.src = reader.result;
}
reader.readAsDataURL(file);
}
}
Edit: Geen idee wat je met ImageID wilt doen, maar als het enkel is om te tonen, denk ik niet dat het nodig is om dat parameter mee te geven.
document.querySelector :
Quote:
Returns the first element within the document (using depth-first pre-order traversal of the document's nodes
Ik denk dat daarom die ID wordt meegestuurd ^^
Randy vsf op 06/01/2016 13:00:59:
Je geeft een ID mee als 2e parameter, dat ID probeer je een src te geven ipv het element..
Nu je het zegt.
Nooit aan gedacht, maar helemaal correct.
Randy vsf op 06/01/2016 13:00:59:
doe eens document.getElementById('') ervoor, voordat je het een src probeert te geven.
Ja, dan doet ie het inderdaad.
Heel erg bedankt.
En wat betreft die parameters.
Ik wil een nette functie maken die ik vanaf verschillende plekken kan aanroepen.
En dan heb je parameters nodig want het zijn verschillende ID's.
Toevoeging op 06/01/2016 13:33:33:
Randy vsf op 06/01/2016 13:00:59:
Code (php)
1
2
2
console.log(imageID);
console.log(document.getElementById(imageID));
console.log(document.getElementById(imageID));
Dit kende ik ook niet.
Erg handig dat zie ik al.
Bedankt voor les/info.