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

相关文章

来自专栏张善友的专栏

強大的jQuery Chart组件-Highcharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全...

2045
来自专栏前端新视界

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没...

2057
来自专栏Golang语言社区

【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上的摄像头实例

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术...

41611
来自专栏九彩拼盘的叨叨叨

前端组件整理

552
来自专栏小鹏的专栏

人脸检测——生成矫正人脸——cascade cnn的思想, 但是mtcnn的效果貌似更赞

简单粗暴,不多说,直接代码吧:(这个代码实在上篇博客的基础上:人脸检测——AFLW准备人脸) 先要生成AFLW_ann.txt。 import os from ...

2145
来自专栏PHP技术

php 跨域 form提交 2种方法

1:php的curl方式 function curlPost($url,$params) { $postData = ''; foreach($param...

3195
来自专栏SeanCheney的专栏

Python模拟登陆 —— 征服验证码 4 果壳

果壳的特殊之处是有隐藏的随机token令牌, ? 登录界面 查看源代码: ? 隐藏的令牌 import sys import os.path import ht...

2528
来自专栏林德熙的博客

WPF 禁用实时触摸

微软想把 WPF 作为 win7 的触摸好用的框架,所以微软做了很多特殊的兼容。为了获得真实的触摸消息,微软提供了 OnStylusDown, OnStylus...

101
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges

Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件。这将意味着它们的基础类库具有很多支持者。具有众多的支持者同时也意味着更多好用的工具。这些...

1998
来自专栏菩提树下的杨过

silverlight图片局部放大效果

很多购物平台中(比如京东购物),浏览产品详情时都有这种效果,前几天看到有朋友问SL能不能实现,当然可以  ? 界面: 1.左侧小图片(用一个矩形Fill一张图片...

1866

扫描关注云+社区