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

相关文章

来自专栏余生开发

vue脚手架移动适配--rem(iPhone图纸750px)

移动端设计图稿一般按iphone6 的750px 设计,经过此适配之后,可直接写图纸测量的数据,包括文字大小

1104
来自专栏HaHack

0行代码让叮当监控重要事件

1032
来自专栏逆向与安全

APK加固之静态脱壳机编写入门

1.大家都知道Android中的程序反编译比较简单,辛苦开发出一个APK轻易被人反编译了,所以现在就有很多APK加固的第三方平台,比如爱加密和梆梆加固等。

1340
来自专栏计算机编程

Android 7.0+ notification更新progress

652
来自专栏LeeCen

iOS微信支付简单的使用

752
来自专栏安富莱嵌入式技术分享

基于emWin的WAV,MP3软解软件播放器,带类似千千静听频谱,含uCOS-III和FreeRTOS两个版本

第9期:WAV,MP3软解播放器,带类似千千静听频谱 配套例子: V6-916_STemWin提高篇实验_WAV,MP3软解播放器,带类似千千静听频谱(uCOS...

832
来自专栏前端菜鸟变老鸟

JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)

513
来自专栏王亚昌的专栏

如何在Go中使用Protobuf

Protobuf对于Golang通过插件进行支持,因些需要安装protoc的执行环境,下面我们来一步步看下,如何搭建一个编译环境。

771
来自专栏技术记录

java实现发送邮件服务器,SMTP协议发送邮件

1.采用SMTP的邮件发送协议。准备:在网易注册一个邮箱,进入设置开启SMTP/pop3协议 ? 2.接下来就是java代码实现了,下面都有注释,就不多做解释了...

2589
来自专栏月色的自留地

为OPENCV添加freetype支持并显示中文字符(在mac上编译opencv及contrib库)

  在mac电脑上管理这些gnu的库一般都使用Homebrew,但总有一些你个性化的需要是官方的Homebrew配方无法满足的。比如在屏幕的输出中使用中文字...

751

扫码关注云+社区