前端js实现上传图片大于2M时压缩,预览

最新推荐文章于 2025-06-11 15:26:10 发布

原创

最新推荐文章于 2025-06-11 15:26:10 发布 · 1.1w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#图片压缩 #图片预览

本文介绍了如何在前端通过JS实现图片上传预览时，自动判断图片大小。若图片大于2M，则使用canvas进行压缩；小于2M则直接展示原图。这样做能节省带宽，提高上传速度，避免服务器空间浪费。文章提供了HTML、CSS和JS的实现代码，并提及该方案仅适用于IE10及以上浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个需求,用户在上传图片预览时,需要显示大小为2M以下,大于2M的需要压缩后上传,小于2M的原图显示

一.先说下限制图片大小的好处

直接上传特别占用带宽，上传速度慢,对程序考验以及影响用户的体验
图片资源直接上传,占用的服务器空间过大,容易造成空间浪费

二.实现思路

只要是借用canvas和FileReader函数,以下是代码,其中添加了需求,大于2M的图片才进行压缩,小于的原图显示

html文件

 <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ImgDemoContainer">
                    <div class="form-group">
                        <input type="file" class="form-control" id="upload" name="image"/>
                    </div>
                    <div id="previewImg">
                        <img src="" id="viewImg">
                    </div>
                </div>
            </div>
        </div>
    </div>

css文件