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 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【编程基础】聊聊C语言-存储世界的奥秘

上一篇讲到了C语言的数据类型,从这篇我们开始讲讲与数据类型有这着千丝万缕联系的变量。 所有语言的变量都是存储在计算机存储系统中,C语言的变量当然也不例外。所以...

3827
来自专栏镁客网

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

1673
来自专栏编程

零基础如何自学Python

程序员在普通人眼里就像魔法师,一个脚本轻松抢几十盒月饼(虽然最后被开除),一个插件解决春运抢票难题,几十行代码搭建一个 Web 网站,用微信自动和妹纸聊天,在程...

5038
来自专栏斑斓

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

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

3396
来自专栏IT笔记

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

2716
来自专栏杨建荣的学习笔记

宕机的那些事儿(r12笔记第44天)

DBA干了这么多年,一直以来有一个疑惑,那就是从半夜的电话中吵醒时,几乎清一色都是宕机类问题,每次我就忍不住想喊,大早上宕机,让不让人睡觉了。但是抱怨归抱怨...

4219
来自专栏IT笔记

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

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

69612
来自专栏代码世界

操作系统背景知识

 操作系统发展过程 1、手工操作方式 ——穿孔卡片(串行)   两个特点:   (1)用户独占全机。不会出现因资源已被其他用户占用而等待的现象,但资源的利用率低...

2939
来自专栏玉树芝兰

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

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

1592
来自专栏vue+shiro

基于vue(element ui) + ssm + shiro 的权限框架

现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目,网上有句话说,语言框架迭代太快了,我学不动了,不如回去搬...

1K2

扫码关注云+社区

领取腾讯云代金券