html选中图片时，在页面回写图片

我们经常会遇到这种情况，就是上传一个图片，但是点击一个图片的时候，最好是可以在浏览器预览这个图片，不然用户还以为没有选择图片呢，但是浏览器的安全机制却阻止了这个问题，就是当访问的是网络上的网站的时候，是不可以直接访问本地的文件的，因为这样子那岂不是人家写一个网站，就可以获得所有登陆这个网站人的一些资料了，寻么我们就可以通过其它的方式来操作，下面给出一些javascript代码，不是jquery，可以直接使用的。

//定义id选择器
function Id(id){
return document.getElementById(id);
}
//入口函数，两个参数分别为<input type='file'/>的id，还有一个就是图片的id，然后会自动根据文件id得到图片，然后把图片放到指定id的图片标签中
function changeToop(fileid,imgid){
    var file = Id(fileid);
    if(file.value==''){
        //设置默认图片
    Id("myimg").src='http://sandbox.runjs.cn/uploads/rs/72/huvtowwn/zanwu.png';
    }else{
        preImg(fileid,imgid);
    }
}
//获取input[file]图片的url Important
function getFileUrl(fileId) { 
    var url; 
    var file = Id(fileId);
    var agent = navigator.userAgent;
    if (agent.indexOf("MSIE")>=1) {
    url = file.value; 
    } else if(agent.indexOf("Firefox")>0) { 
    url = window.URL.createObjectURL(file.files.item(0)); 
    } else if(agent.indexOf("Chrome")>0) {
    url = window.URL.createObjectURL(file.files.item(0)); 
    } 
    return url; 
} 
//读取图片后预览
function preImg(fileId,imgId) { 
var imgPre =Id(imgId);
imgPre.src = getFileUrl(fileId); 
}

这里的入口方法为

changeToop（）
只要在这里面加两个参数，一个是选择文件的id，一个则是图片的id，然后给文件input一个onchange事件，来触发这个changeTop()，这样就可以达到预览图片的效果了

                            <div id="preview" style="float:left">
                                    <img id="imghead"  class="logo-size" src=''/>
                            </div>
                            <input id="filgo" type="file" name="logo" onchange="changeToop('filgo','imghead');" value="上传图片">

 

转载于:https://www.cnblogs.com/zhuxiaojie/p/4735641.html