先上效果
上传图片后(设置了最多上传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" οnsubmit="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>