图片本地上传预览

Posted 2020-09-18 lewo的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片本地上传预览相关的知识，希望对你有一定的参考价值。

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

例子：

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>

以上是关于图片本地上传预览的主要内容，如果未能解决你的问题，请参考以下文章

JS兼容各个浏览器的本地图片上传即时预览效果

JavaScript实现本地图片上传预览功能（兼容IEchromeFF）

微信小程序实现图片是上传预览功能

JQuery插件：图片上传本地预览插件，改进案例一则。

本地上传图片预览

本地图片的预览和上传