首先,我们先来看html如何写,这里面我使用了canvas画出来图片。
<div class="col-md-6">
<div class="form-group" uploader="uploader">
<label class="oLabel1">轮播图图片:</label>
<div class="m-l-lg">
<div class="form-group inline fileinput" ng-if="uploader2.queue.length == 0" style="margin-left:0;background: url('{{activityForm.viewImg}}') no-repeat; background-size:128px 128px;">
<input class="form-control inline w_search_input" nv-file-select="" type="file" uploader="uploader2" accept="image/png,image/jpeg" />
</div>
<div class="form-group inline fileinput" ng-if="uploader2.queue.length > 0" style="margin-left:0;background: none">
<!--<canvas id="p3" ng-init="initimg2(uploader2.queue[uploader2.queue.length -1]._file)"></canvas>-->
<canvas id="p3"></canvas>
<input class="form-control inline w_search_input" style="position: absolute;top:0" nv-file-select="" type="file" uploader="uploader2" accept="image/png,image/jpeg" />
</div>
<div class="form-group inline filemask none" id="filemask2">
<span>正在上传中...</spaN>
</div>
</div>
</div>
</div>
接着我大概写下我的js流程:
1.首先定义了一个对象:
$scope.activityForm = {
viewImg:'img/upload_default.jpg',
createTime:new Date().Format("yyyy-MM-dd"),
}
2.接着我定义了一个对象,并且设置图片的大小
var options2 = {
mimeType: "image/jpeg",//这是一个空白图片
filename: "shareDetailPhoto",
appid: 195,//适配。
};
var uploader2 = $scope.uploader2 = new FileUploader({
url:接口,
formData:[options2]
});
uploader2.filters.push({
name: 'imageFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}//图片的规则
});
uploader2.onAfterAddingFile = function(fileItem) {
if(fileItem._file.size > 204800){//1M=1048576
uploader2.queue.length = 0;
alert("文件太大");
//控制图片的大小。
}else{
$scope.initimg2(fileItem._file);
fileItem.upload();
angular.element("#filemask2").removeClass("none")
}
};
uploader2.onSuccessItem = function(fileItem, response, status, headers) {
var returnData = angular.fromJson(response);
if(returnData.return_code == 0){
uploader2.queue=[];
$scope.activityForm.viewImg= returnData.return_data.file_path;
toaster.pop("success","提示",'轮播图图片上传成功');
}else{
toaster.pop("error","提示",'轮播图图片上传失败');
}
angular.element("#filemask2").addClass("none")
};
$scope.initimg2 = function(file){
var canvas = angular.element(document.getElementById("p3"));
var reader = new FileReader();
var params = {
width:120,
height:120
};
reader.onload = function(event){
var img = new Image();
img.onload = function(){
var width = params.width || this.width / this.height * params.height;
var height = params.height || this.height / this.width * params.width;
canvas.attr({ width: width, height: height });
canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
最后就可以上传图片了,写的不是特别细,自己慢慢看吧。
效果图就是下面