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

puyuetian 乐天 关注 九级站长 创始人
发表于前端UI学习设计文章版块
以下代码及案例基于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));
该函数可直接调用,无需等待服务端处理后返回数据再处理,也可自行对图片进行进一步处理,缩放、剪裁及修改格式。



评论列表 评论
athome 小手牵大手 七级站长 VIP 2#
具体该怎么用?不懂代码。怎么办?出个教程啊
共0条回复,点击查看回复
发布评论

评论: JS 图片浏览器前端预览及浏览器上传文件本地路径获取

已有0次打赏
(11) 分享
分享

请保存二维码或复制链接进行分享

取消