zoukankan      html  css  js  c++  java
  • 图片本地上传预览

    在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;
            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>
  • 相关阅读:
    Java SE 基础之接口回顾
    读书杂谈-《架构探险:从零开始写Java Web框架》
    Java Se之类加载问题思考
    struts2 下载记录
    《重构改善既有代码的设计》笔记之序
    Luence简单实现2
    RabbitMQ学习(1):安装
    jquery插件dataTables添加序号列
    父<IFRAME>获取子页属性以及子页中<IFRAME>的方法
    类的约束 异常处理 自定义异常 MD5 日志信息处理
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/6866419.html
Copyright © 2011-2022 走看看