html代码
<img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" class="img-circle" width="100px" height="100px" >
<input id="image" type='file' name='myFile' size='15' οnchange="showPicture(this)"/>
js代码
function showPicture(imgFile){
// alert(window.URL.createObjectURL(imgFile.files[0]));
/*获取上传文件的路径*/
document.getElementById("newImage").src = window.URL.createObjectURL(imgFile.files[0]);
}
//preview img : 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);
}
document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0];
6
8 var fr = new FileReader();
9 fr.onload = function(ele){
10
11 var pvImg = new Image();
12 pvImg.src = ele.target.result;
13 pvImg.setAttribute('id','previewImg');
14
15 $('.preview_wrap').html('').append(pvImg);18 }
20 fr.readAsDataURL(ele);
21 }