Plaatje bij Input

Geen enkel probleem:
http://jsfiddle.net/d3H9f/9/

(is alleen jQuery wat ik vond, maar kan zeker zonder dit)

Ik zoek het inderdaad zonder jQuery.

http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

@Ariën: Thanks.

Het voorbeeld in de laatste link heb ik hier aan de praat.
Dus dat gaat wel lukken.


Bedankt.

SanThe.

Top :-)

Iemand een idee waarom dit wel werkt?

<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>

En dit niet?
Het verschil is de parameter.

<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>

Je geeft een ID mee als 2e parameter, dat ID probeer je een src te geven ipv het element..
doe eens document.getElementById('') ervoor, voordat je het een src probeert te geven.

console.log(imageID);
console.log(document.getElementById(imageID));

Als je dit bovenaan je functie zet, zie je het verschil.

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);
    }
}

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.

DavY - op 06/01/2016 13:05:15

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);
    }
}

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 :

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.



[size=xsmall]Toevoeging op 06/01/2016 13:33:33:[/size]

Randy vsf op 06/01/2016 13:00:59

console.log(imageID);
console.log(document.getElementById(imageID));

Dit kende ik ook niet.
Erg handig dat zie ik al.
Bedankt voor les/info.