html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

最新推荐文章于 2025-06-23 20:18:35 发布

原创

最新推荐文章于 2025-06-23 20:18:35 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #文件上传

本文展示了如何使用HTML和JavaScript实现图片上传功能，包括限制最多上传3张图片、图片预览、删除和旋转功能。关键在于利用FormData对象处理图片，并解决了iOS设备拍照后图片自动旋转的问题。提供了相关HTML、JS代码示例。

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

先上效果

上传图片后(设置了最多上传3张图片,三张后上传按钮消失)

点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正)

html页面

需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响

addPhoto.html

 <!--图片缩略图-->
         <div class="weui-cells weui-cells_form" style="margin-top:0px;">
                <div class="weui-cell">
                      <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                    <p class="weui-uploader__title" style="font-size: 14px;">照片:</p>
                                 <div class="weui-uploader__info"><span id="curNum">0</span>/3</div>
                            </div>
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles"></ul> <!--缩略图显示-->
                                <div class="weui-uploader__input-box">
                                        <form action="" id="upBox_add" onsubmit="return false;">
                                        <input id="uploaderInput" name="file" class="weui-uploader__input zjxfjs_file" type="file"  capture="camera" accept="image/png,image/jpg,image/gif,image/JPEG" multiple=""></input>
                                     </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         <!--放大图片显示-->
          <div class="weui-gallery" id="gallery">
                  <span class="weui-gallery__img" id="galleryImg" style="bottom: 12%;"></span>
                  <div class="weui-gallery__opr" style="width:50%;">
                    <a href="javascript:" class="weui-gallery__del">
                        <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                    </a>
                </div>
                 <!-- 图片旋转按钮-->
                 <div class="weui-gallery__opr2" style="z-index: 1200;width:50%;position: absolute;bottom:0;right:0;background-colo