前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jq实现上传头像并实时预览功能

jq实现上传头像并实时预览功能

作者头像
李文杨
发布2018-03-14 13:39:42
1.4K0
发布2018-03-14 13:39:42
举报

效果

页面结构

代码语言:javascript
复制
 <form action="" name="form0" id="form0">  
        <input type="file" name="pic" id="pic" class="file0"/>  
        <a href="">选择图像</a>  
        <span id="info"></span>  
        <img src="" alt="" id="img0" width="100" />  
    </form>  

JS代码

代码语言:javascript
复制
 $(function(){  
            $("#pic").change(function(){  
                if($.browser.msie){  
                    $("#img0").attr("src",$(this).val())  
                    $("#info").text("当前选择的文件:"+$(this).val())  
                }else{  
                    $("#info").text("当前选择的文件:"+$(this).val())  
                    var objUrl=getObjectURL(this.files[0]);  
                    console.log("objUrl="+objUrl);  
                    if(objUrl){  
                        $("#img0").attr("src",objUrl);  
                    }  
                }  
            })  
            //建立一個可存取到該file的url  
            function getObjectURL(file) {  
                var url = null ;   
                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 ;  
            }  
        })  

需要注意的是如果使用jQuery 1.9及以上版本移除了$.browser可以使用$.support来替代

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档