HTML5 原生API input file 来实现多图上传,并大图预览
闲来无事,突然想用原生来实现图片的多图上传。 一、效果图大致如下: 1、上传时可以选择多图 2、上传之后缩略图下过图如下: 3、点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应的大图。效果如下: 4、点击删除,弹出是否要删除的弹框,点击确定后,删除。效果图如下: 二、要求 1、限制图片的张数(4张) 2、限制单个图片的大小(1M) 3、支持拖拽上传 4、上传后显示小图预览 5、点击小图进行大图预览 6、实现agax上传 三、所需插件 1、由于时间原因,页面布局依赖于bootstrap 2、滚动插件用的 swiper.js 3、弹框差价 layer 四、页面布局 4-1、缩略效果图如下: 4-2、缩略图的HTML代码如下: <form action="post" class="vaildform fmreset" enctype="multipartform-data"> <div class="form-group clearfix"> <label class="col-lg-2 col-md-2 col-sm-2 control-label" for="userName">图册</label> <div class="col-lg-10 col-md-10 col-sm-10 clearfix"> <!-- 图片展示 --> <div class=