码迷,mamicode.com
首页 > Web开发 > 详细

图片本地上传预览

时间:2017-05-17 12:01:45      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:javascrip   ref   lock   jquery   ice   viewport   https   scale   fileread   

在IE里面显示的话,你可以用div直接显示图片,不通过img来添加SRC,这样就不会有小图标出现

例子:

<div class="banner_up_pic" id="imgPreDiv"></div>

var file_upl = document.getElementById("file"); 

file_upl.select(); 

获取图片路径  var imgpath=document.selection.createRange().text; 

注意imgPreDiv 为图片显示的div的ID !!!  document.getElementById("imgPreDiv").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\""+ imgpath + "\")";//使用滤镜效果 

技术分享

 

我写了一个兼容版本

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <meta name="description" content="图片本地上传预览">
    <meta name="author" content="jiangxiaobo">
    <link rel="icon" href="favicon.ico">
    <title>图片本地上传预览</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/*.css"> -->

    <style type="text/css">
    .preview {
        position: relative;
        width:260px;
        height:190px;
        border:1px solid #000;
        overflow:hidden;
    }
    .preview .imghead {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-size: 100%;
    }
    .preview .input-file {
        position: absolute;
        left: -1000px;
        top: -1000px;
    }
    </style>
</head>
<body>
    
    <div class="preview">
        <label class="imghead">
            <input class="input-file" type="file" accept="image/*" onchange="previewImage(this)" />
        </label>
    </div>
    
    <script type="text/javascript" src="./Public/web/js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript">
        function previewImage(file){
            // console.log(file.files);
            var imghead = $(file).parent(‘.imghead‘);
            var preview = imghead.parent(‘.preview‘);
            var imgheadOffset = imghead.offset();
            var rect = {
                top : imgheadOffset.top,
                left : imgheadOffset.left,
                width : imghead.width(),
                height : imghead.height()
            };
            if(file.files && file.files[0]){
                // 主流浏览器
                var reader = new FileReader();
                reader.onload = function(evt){
                    imghead.css(‘background-image‘,‘url(‘+evt.target.result+‘)‘);
                };
                reader.readAsDataURL(file.files[0]);
            }else{
                //兼容IE
                file.select();
                var src = document.selection.createRange().text;
                preview.css(‘filter‘,‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="‘+src+‘")‘);
            }
        }
    </script>
</body>
</html>

 

图片本地上传预览

标签:javascrip   ref   lock   jquery   ice   viewport   https   scale   fileread   

原文地址:http://www.cnblogs.com/jiangxiaobo/p/6866419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!