首页 > 代码库 > 图片本地上传预览

图片本地上传预览

2024-09-22 19:50:25   218人阅读

在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=http://www.mamicode.com/""+ 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="http://www.mamicode.com/favicon.ico">
    <title>图片本地上传预览</title>
    <!-- <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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="http://www.mamicode.com/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 =http://www.mamicode.com/ document.selection.createRange().text;
                preview.css(‘filter‘,‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://www.mamicode.com/‘+src+‘")‘);
            }
        }
    </script>
</body>
</html>

 

图片本地上传预览


联系
我们