获取input[type=file]的访问地址url，可用于本地选择图片预览

最新推荐文章于 2023-12-17 12:43:03 发布

王焜棟琦

最新推荐文章于 2023-12-17 12:43:03 发布

阅读量1.6k

点赞数

分类专栏： js 文章标签： javascript 获取file文件的访问url

本文链接：https://blog.csdn.net/u011511086/article/details/113396810

版权

js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<img id="img01" src="" alt="" />



//获取file文件的访问地址
function getFileUrl(file) {
                var url;
                var agent = navigator.userAgent;
                if (agent.indexOf("MSIE") >= 1 || agent.indexOf("NET")!=-1) {
                    url = window.URL.createObjectURL(file);
                } else if (agent.indexOf("Firefox") > 0) {
                    url = window.URL.createObjectURL(file);
                } else if (agent.indexOf("Chrome") > 0) {
                    url =window.webkitURL.createObjectURL(file);
                }
                return url;
}


//调用
var file=document.getElementById('file').files[0];

//得到地址 blob:http://localhost:8050/18fe5bfa-3d31-4514-bf98-16b0606acb1b
var url = getFileUrl(file);

var imgObj = new Image();
imgObj.src = url;
imgObj.onload = function () {
   document.getElementById('img01').src=url;
   //<img src="blob:http://localhost:8050/0d9b06a8-982f-431b-aee9-bfe6840a1e24" alt="">
}