Ik wil een voorbeeld van een bestand (afbeelding) kunnen bekijken voordat het wordt geupload. De preview-actie moet helemaal in de browser worden uitgevoerd zonder Ajax te gebruiken om de afbeelding te uploaden.
Hoe kan ik dit doen?
Kijk eens naar de voorbeeldcode hieronder:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
U kunt ook [dit voorbeeld hier proberen](
).Het antwoord van LeassTaTT werkt goed in "standard" browsers zoals FF en Chrome. De oplossing voor IE bestaat, maar ziet er anders uit. Hier beschrijving van cross-browser oplossing:
In HTML hebben we twee preview elementen nodig, img voor standaard browsers en div voor IE
HTML:
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
In CSS specificeren we het volgende IE-specifieke ding:
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
In HTML nemen we de standaard en de IE-specifieke Javascripts op:
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
<![endif]-->
De pic_preview.js
is het Javascript uit het antwoord van LeassTaTT's. Vervang de $('#blah')
door de $('#preview')
en voeg de $('#preview').show()
toe
Nu het IE specifieke Javascript (pic_preview_ie.js):
function readURL (imgFile) {
var newPreview = document.getElementById('preview_ie');
newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
newPreview.style.width = '160px';
newPreview.style.height = '120px';
}
Dat'is. Werkt in IE7, IE8, FF en Chrome. Test aub in IE9 en rapporteer. Het idee van IE preview is hier gevonden: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Wat dacht je van een functie die het bestand laadt en een aangepaste gebeurtenis afvuurt. Koppel dan een luisteraar aan de invoer. Op deze manier hebben we meer flexibiliteit om het bestand te gebruiken, niet alleen voor het bekijken van afbeeldingen.
/**
* @param {domElement} input - The input element
* @param {string} typeData - The type of data to be return in the event object.
*/
function loadFileFromInput(input,typeData) {
var reader,
fileLoadedEvent,
files = input.files;
if (files && files[0]) {
reader = new FileReader();
reader.onload = function (e) {
fileLoadedEvent = new CustomEvent('fileLoaded',{
detail:{
data:reader.result,
file:files[0]
},
bubbles:true,
cancelable:true
});
input.dispatchEvent(fileLoadedEvent);
}
switch(typeData) {
case 'arraybuffer':
reader.readAsArrayBuffer(files[0]);
break;
case 'dataurl':
reader.readAsDataURL(files[0]);
break;
case 'binarystring':
reader.readAsBinaryString(files[0]);
break;
case 'text':
reader.readAsText(files[0]);
break;
}
}
}
function fileHandler (e) {
var data = e.detail.data,
fileInfo = e.detail.file;
img.src = data;
}
var input = document.getElementById('inputId'),
img = document.getElementById('imgId');
input.onchange = function (e) {
loadFileFromInput(e.target,'dataurl');
};
input.addEventListener('fileLoaded',fileHandler)
Waarschijnlijk is mijn code'niet zo goed als die van sommige gebruikers, maar ik denk dat je het punt wel snapt. Hier zie je een [voorbeeld][1]