Voglio essere in grado di vedere in anteprima un file (immagine) prima che venga caricato. L'azione di anteprima dovrebbe essere eseguita tutta nel browser senza usare Ajax per caricare l'immagine.
Come posso farlo?
Date un'occhiata al codice di esempio qui sotto:
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>
Inoltre, puoi [provare questo esempio qui](
).La risposta di LeassTaTT funziona bene in "standard" browser come FF e Chrome. La soluzione per IE esiste, ma ha un aspetto diverso. Qui la descrizione della soluzione cross-browser:
In HTML abbiamo bisogno di due elementi di anteprima, img per i browser standard e div per IE
HTML:
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
Nel CSS specifichiamo la seguente cosa specifica per IE:
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
In HTML includiamo i Javascript standard e quelli specifici per IE:
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
<![endif]-->
Il pic_preview.js
è il Javascript della risposta di LeassTaTT's. Sostituisci il $('#blah')
con il $('#preview')
e aggiungi il $('#preview').show()
Ora il Javascript specifico per IE (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';
}
Questo è. Funziona in IE7, IE8, FF e Chrome. Si prega di testare in IE9 e segnalare. L'idea dell'anteprima di IE è stata trovata qui: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Che ne dite di creare una funzione che carica il file e spara un evento personalizzato. Poi attaccare un ascoltatore all'input. In questo modo abbiamo più flessibilità per utilizzare il file, non solo per l'anteprima delle immagini.
/**
* @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)
Probabilmente il mio codice non è buono come quello di alcuni utenti, ma penso che ne capirete il senso. Qui potete vedere un [esempio][1]