上传图片预览及其获取图片宽高

最新推荐文章于 2024-05-25 11:22:02 发布

摸路

最新推荐文章于 2024-05-25 11:22:02 发布

阅读量3.1k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_27868533/article/details/78977863

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

html中表单元素input[type=file]本身不提供图片预览效果，只能显示当前选择的文件名，需要查看预览效果的话没有API提供支持。某些特殊环境需要对上传图片的宽高有特定需求，需要严格把控，不符合规定不能上传。

出于安全考虑，前端是不能直接获取并显示需要上传的文件的，只能另辟蹊径，还好H5提供了文件系统，在处理这些问题时提供了很大支持，可以将本地文件先转化为base64文件格式，然后再展示到页面，就达到了预览的效果，但是万恶的IE9及其以下不识别H5的文件系统，好吧，只能用滤镜来做了。

上传图片预览

使用H5的FileReader方法处理本地上传文件为base64文件格式，然后将其绑定到预览图片标签img的src属性即可达到预览效果

兼容性（ firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #preview, .img, img {
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>

<img id="preview" src="" alt="请上传图片">
<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" οnchange="previewImg(this)" />
<script type="text/javascript">
    function previewImg(file) {
        var img = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt){
                img.src = evt.target.result;
            };
            reader.readAsDataURL(file.files[0]);
        }else {
            // IE9以下不支持H5文件系统 使用滤镜处理
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'"+ file.value + "\')";
        }
    }
</script>
</body>
</html>

上传图片宽高限制

获取上传图片宽高的策略：既然获取不到，那就索性创建一个img对象，然后把src指向上传图片，那么不就可以获取了吗？

但是万恶的IE又出问题了，本来new Image（）后，获取新创建的图片对象onload()方法不去触发，浏览了很多博客都说是缓存机制造成的，src设置放在onload事件之后就可以解决，然而并没有效果，依旧是不会触发。

经过多次尝试后发现，不是不能触发onload事件，而是无法识别本地图片的链接，相当于只是创建了一个img标签，当然无法触发onload事件了，有些小伙伴获取的宽高都为0也就正常了。

因此我建议IE9以下版本的图片验证可以等上传成功后获取返回图片链接去判断，再去做处理。

注：获取图片宽度前必须先onload（），还有onload事件是异步的

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
        #preview, #preview {
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>

<img id="preview" src="" alt="请上传图片">
<img id="IeImg" src="">
<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" οnchange="previewImg(this)" />
<script type="text/javascript">
    function previewImg(file) {
        var img = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt){
                img.src = evt.target.result;
                // 创建image对象
                var image = new Image();
                image.src = evt.target.result;
                // 获取图片宽高
                image.onload = function(){
                   console.log("宽度为：",this.width,"高度为：",this.height);
                }
            };
            reader.readAsDataURL(file.files[0]);
        }else {
        // 不支持FileReader
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'"+ file.value + "\')";

        var images = new Image();
        var imgSrc = "返回的图片链接"; 
        images.onload = function(){
            console.log("宽度为：",this.width,"高度为：",this.height);
        };
        images.src = imgSrc;

        }
}
</script>


</body>
</html>

摸路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
上传图片预览及其获取图片宽高

html中表单元素input[type=file]本身不提供图片预览效果，只能显示当前选择的文件名，需要查看预览效果的话没有API提供支持。某些特殊环境需要对上传图片的宽高有特定需求，需要严格把控，不符合规定不能上传。出于安全考虑，前端是不能直接获取并显示需要上传的文件的，只能另辟蹊径，还好H5提供了文件系统，在处理这些问题时提供了很大支持，可以将本地文件先转化为base64文件格式，
复制链接

扫一扫