原生js上传图片功能 angular语法(可改写为其他语言版本)。

效果图:

HTML代码:

<div class="addImages">
<div class="addImagesSample" ng-repeat="item in allImgBaseData track by $index">
<span> 
<img ng-src='{{item}}'>
<i class='icon ion-close-circled removeImg' ng-click='removeImg($index)'></i>
</span>
</div>
<label class="addImagesButton" for="inputs" ng-if="allImgBaseData.length!=5">
  <span>添加图片({{allImgBaseData.length}}/5)</span>
  <input accept="image/*" type="file" accept=".gif,.jpg,.jpeg,.png" οnchange="angular.element(this).scope().fileChange(this)">
  </label>
</div>

CSS代码:

.addImages {
padding:15px;
width: 100%;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #F8F8F8;
}


.addImagesSample>span {
position: relative;
float: left;
width: 80px;
height: 80px;
margin-bottom: 20px;
margin-right: 20px;
}


.addImagesSample>span>img {
width: 80px;
height: 80px;
}


.addImagesSample>span>i {
position: absolute;
font-size: 24px;
right: -12px;
top: -12px;
color: rgba(0, 0, 0, 0.7)
}


.addImagesButton {
position: relative;
float: left;
width: 80px;
height: 80px;
background: #fff;
text-align: center;
}


.addImagesButton>input {
position: absolute;
Z-index: 5;
width: 80px;
opacity: 0;
height: 80px;
left: 0px;
top: 0px;
}


.addImagesButton>span {
width: 80px;
height: 80px;
display: block;
background-color:#FFF;
background-image: url(../../../img/mall/shop/添加图片@2x.png);
background-repeat:no-repeat;
background-size: 100%;
font-size:10px;
color:#888;
padding-top:53px;
text-align: center;
box-sizing:border-box;
}

JS代码:

//上传图片方法
$scope.allImgBaseData = []; //所有图片的base码集合
$scope.fileChange = function(fil) {
var filtext = fil.files[0];
if(parseInt(filtext.size) / 1024 > 1024) {
$hctopalert.show({
text: "仅可以上传1M以内的图片"
});
return false;
};
if($scope.allImgBaseData.length >= 5) {
$hctopalert.show({
text: "图片已达到上限"
});
return false;
};
var reader = new FileReader();
reader.readAsDataURL(filtext);
reader.onload = function() {
var strcode = reader.result;
$scope.allImgBaseData.push(strcode); //储存到数组里
$scope.$apply();
}
};
//选出图片可删除功能
$scope.removeImg = function(index) {
$scope.allImgBaseData.splice(index, 1);
};