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

效果

页面结构

 <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代码

 $(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来替代

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏斑斓

工具 | 我们推荐的高效工具

几天前,ThoughtWorks China咨询师团队召开了一次团结的大会,成功的大会。为期三天的会议,分享的内容并不亚于坊间举行的技术大会,包含了敏捷组织转型...

3176
来自专栏张叔叔讲互联网

当妈妈在淘宝购物的时候,都发生了什么?(上篇)

网络购物已经成为了一种生活习惯,而每个家庭里面最爱网络购物的应该是你妈妈或者你姐姐吧。当他们通过电脑或者手机访问淘宝的时候,到底中间发生了什么事情呢?今天张叔叔...

971
来自专栏IT笔记

SpringBoot开发案例从0到1构建分布式秒杀系统

最近,被推送了不少秒杀架构的文章,忙里偷闲自己也总结了一下互联网平台秒杀架构设计,当然也借鉴了不少同学的思路。俗话说,脱离案例讲架构都是耍流氓,最终使用Spri...

61312
来自专栏玉树芝兰

安装 Python 软件包遇错误,怎么办?

本文通过一个命令行转换 pdf 为词云的例子,给你讲讲 Python 软件包安装遇挫折时,怎么处理才更高效?

1292
来自专栏IT笔记

SpringBoot开发案例从0到1构建分布式秒杀系统

2306
来自专栏镁客网

「产品」揭秘全球首款Android PC的奥秘

1543
来自专栏腾讯技术工程官方号的专栏

微信朋友圈:应对春节千亿访问量背后的故事

微信朋友圈包括图片和视频两套业务架构组成,朋友圈图片的特点是请求量大、消耗计算资源较多,视频则主要消耗带宽。朋友圈的数据是永远存储的,而且随着业务的快速发展,存...

8503
来自专栏游戏杂谈

升级IOS8游戏上传自定义头像功能失效的问题

为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了。

782
来自专栏SDNLAB

如何像Facebook一样构建数据中心 – BGP在大规模数据中心中的应用(2)

3014
来自专栏coding

程序员如何优雅使用mac

在折腾windows和linux一段时间内,饱经各种摧残的我,虽然掌握了一些不为人知的黑科技,终于对此感到厌倦,转投mac阵营。入手了2017款的Apple M...

1642

扫码关注云+社区