html点击浏览上传图片路径,JS 图片浏览器前端预览及浏览器上传文件本地路径获取...

以下代码及案例基于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));该函数可直接调用，无需等待服务端处理后返回数据再处理，也可自行对图片进行进一步处理，缩放、剪裁及修改格式。