首页 > Web开发 > 详细

Html5上传图片的预览

时间:2014-04-03 23:33:36      阅读:541      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="html5.js"></script>
    <script>

        $(function(){
            $(#importFile).change(function(){
                var files = this.files ? this.files: [];
                
                if(!files.length ) {
                
                    return;
                }
                if(typeof FileReader == undefined) return;
                
                if(/^image/.test(files[0].type)){
                
                    var reader = new FileReader();
                    
                    reader.readAsDataURL(files[0]);
                    
                    reader.onloadend = function(){
                    
                        $(#image1).attr(src,this.result);
                    }
                }
            })
            
            $(#image1).click(function(){
                
                $(#importFile).click();
            })
        });
        
    </script>
</head>
<body>
    <img id="image1" style="width:100px;height:100px" />
    <div>
        <input type="file" id="importFile" style="display:none" />
    </div>
</body>
</html>
bubuko.com,布布扣

 

Html5上传图片的预览,布布扣,bubuko.com

Html5上传图片的预览

原文:http://www.cnblogs.com/A-Iverson/p/3643503.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!