4000 js获取input file路径改变图像地址

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' onchange="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     }