img标签显示本地文件

最新推荐文章于 2024-08-07 09:00:08 发布

weixin_34416649

最新推荐文章于 2024-08-07 09:00:08 发布

阅读量1.8k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/w10234/p/5671997.html

版权

html：

<img src="__IMG__/male.png" id="imgfpic1" style="height: 100%; width: auto; max-width: 100%;">
<input type="file" id="pic" name="pic" οnchange="setpreimg();"  style="position:absolute; top: 0px; left: 0px; bottom: 0px; width: 100%; height: 100%; z-index: 999;  opacity: 0;"/>

js：
//使用html5的FileReader属性

if(window.FileReader){
    var  oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    oFReader.onload = function (e) {
        $("#imgfpic1").attr('src', e.target.result);
    };

    var aFiles = document.getElementById("pic").files;
    if (aFiles.length === 0) { return; }
    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
    oFReader.readAsDataURL(aFiles[0]);
}