以下代码及案例基于jq
//filereader方式
document.getElementById('imgFile').onchange = function(e) {
var ele = document.getElementById('imgFile').files[0];
var fr = new FileReader();
fr.onload = function(ele) {
var pvImg = new Image();
pvImg.src = ele.target.result;
pvImg.setAttribute('id', 'previewImg');
$('.preview_wrap').html('').append(pvImg);
}
fr.readAsDataURL(ele);
}
//URL.createObjectURL 方式
document.getElementById('imgFile').onchange = function(e) {
var ele = document.getElementById('imgFile').files[0];
var createObjectURL = function(blob) {
return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
};
var newimgdata = createObjectURL(ele);
var pvImg = new Image();
pvImg.src = newimgdata;
pvImg.setAttribute('id', 'previewImg');
$('.preview_wrap').html('').append(pvImg);
}
HadSky框架自带函数直接调用:
$('img:eq(0)').attr('src', getLocalFileUrl(this));
该函数可直接调用,无需等待服务端处理后返回数据再处理,也可自行对图片进行进一步处理,缩放、剪裁及修改格式。