使用input 的file添加本地图片

<p>
     <label>请选择一个图像文件:</label>
     <input type="file" id="file_input" />
  </p>
  <div id="result"></div>
var result = document.getElementById("result");
var input = document.getElementById("file_input");

if(typeof FileReader==='undefined'){
    result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
    input.setAttribute('disabled','disabled');
}else{
    input.addEventListener('change',readFile,false);
}
function readFile(){
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("文件必须为图片!");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        // result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        var img=document.createElement("img");
        img.src=this.result;
        console.log(img)
        result.appendChild(img)
    }
}

 

posted @ 2018-11-14 09:48  ①丶①۵  阅读(375)  评论(0)    收藏  举报