在做移动端页面开发的时候,经常会遇到需要上传图片。比如头像上传,发表动态上传多张图片。
一、多张图片上传
html
<div class="addimg" style="display: flex; flex-flow:row wrap;">
<!-- 上传后的图片插到这里,prepend() -->
<!-- <div class="img_box" style="background-image:url(images/addimg.png)"><div class="tips">0%</div></div> -->
<!-- 上传控件 -->
<div id="img_url">
<input class="js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""
style="width: 1rem; height: 1rem; opacity:0">
</div>
</div>
css
/* 插入的图片样式 */
.img_box {
float: left;
margin-right: 9px;
margin-bottom: 9px;
width: 1rem;
height: 1rem;
background: no-repeat center center;
background-size: contain;
position: relative;
}
/* 进度条样式 */
.tips {
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
font-size: .2rem;
color: #fff;
}
js(结合jquery.weui使用)
$(function () {
// 允许上传的图片类型
var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
// 1024KB,也就是 1MB
var maxSize = 1024 * 1024;
// 图片最大宽度
var maxWidth = 3000;
// 最大上传图片数量
var maxCount = 4;
// 上传控件
$('.js_file').on('change', function (event) {
var files = event.target.files;
// 如果没有选中文件,直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; i<