js 获取选中file图片路径并显示的两种方法

最新推荐文章于 2025-06-10 21:51:23 发布

FameLee-

最新推荐文章于 2025-06-10 21:51:23 发布

阅读量1.9w

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_40138785/article/details/84165015

JS 专栏收录该内容

14 篇文章

订阅专栏

方法一：

      <input type="file" id="FileTypeIcon">
       <img src="" class="img" />

$("#FileTypeIcon").live('change', function () {
       var file = this.files[0];//获取文件信息
        if (window.FileReader)
        {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件    
            reader.onloadend = function (e) {
                $(".img").attr("src",e.target.result);
            };
        }
｝

方法二：

     <input type="file" id="FileTypeIcon">
       <img src="" class="img" />

    $("#FileTypeIcon").live('change', function () {

        var objurl = getObjectURL(this.files[0]);
        function getObjectURL(file)
        {
            var url = "";
            if(window.createObjectURL!=undefined)
            {
                url = window.createObjectURL(file);
            }
           else if(window.URL!=undefined)
            {
               url = window.URL.createObjectURL(file);
           }
           else if (window.webkitURL != undefined)
           {
               url = window.webkitURL.createObjectURL(file);
           }
            return url;
        }
        $(".img").attr("src", objurl);
｝