Vēlos, lai pirms faila (attēla) augšupielādes varētu veikt tā priekšskatījumu. Priekšskatījuma darbība jāveic pārlūkprogrammā, neizmantojot Ajax, lai augšupielādētu attēlu.
Kā es to varu izdarīt?
Aplūkojiet tālāk sniegto koda paraugu:
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>
Varat arī [izmēģināt šo paraugu šeit](
).LeassTaTT atbilde darbojas arī "standarta" pārlūkprogrammās, piemēram, FF un Chrome. Risinājums IE pastāv, bet izskatās citādi. Šeit ir aprakstīts starp pārlūkprogrammām paredzētais risinājums:
HTML mums ir nepieciešami divi priekšskatījuma elementi: img standarta pārlūkprogrammām un div IE pārlūkprogrammām.
HTML:
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
CSS mēs norādām šādu IE specifisku lietu:
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
HTML ir iekļauti standarta un IE specifiskie Javascripts:
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
<![endif]-->
pic_preview.js
ir Javascript no LeassTaTT's atbildes. Aizstājiet $('#blah')
ar $('#preview')
un pievienojiet $('#preview').show()
.
Tagad IE specifiskais 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';
}
Tas ir. Darbojas IE7, IE8, FF un Chrome. Lūdzu, pārbaudiet IE9 un ziņojiet. Ideja par IE priekšskatījumu tika atrasta šeit: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Kā izveidot funkciju, kas ielādē failu un izraisa pielāgotu notikumu. Pēc tam pievienojiet klausītāju ievades ievadam. Šādā veidā mums būs vairāk iespēju izmantot failu, ne tikai attēlu priekšskatīšanai.
/**
* @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)
Iespējams, ka mans kods nav tik labs kā dažiem lietotājiem, bet es domāju, ka jūs sapratīsiet tā būtību. Šeit jūs varat redzēt [piemēru][1].