htmldemo
本文模拟发朋友圈的图片上传,这个功能是我项目中的一个实例分享给大家,下面是htmldemo因为我使用的是angular所以‘’upload-image1‘’表示的都是angular中的指令,至于一些样式那就是小伙伴们自由发挥了
![2017年08月10日 2017年08月10日](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
指令
demo
这是相关指令的demo,小编做的是最大上限九张,便使用了九个指令分别控制相对应的html,之所以这样做是因为我们的后台要求每次都传过来九个文件,那么每一个指令的差异就在于‘scope.sendObj.append('file1',file);’中的名不同第二个scope.sendObj.append('file2', file)以此类推,
app.directive('uploadImage1', function () {
return {
link: function (scope,elem) {
elem.on("change",function () {
var file =this.files[0];
if(!/image\/\w+/.test(file.type)) {
;
return false;
//判断所选文件类型是否为图片
}
var reader = newFileReader();
reader.readAsDataURL(file);
reader.onload =function (e) {
//result.innerHTML ='
'
elem.parent().css({
'backgroundImage':'url(' + this.result + ')',
'backgroundSize':'100%'
});
elem.parent().next().show();
//页面效果为初始化完成只有第一个显示,点击当前选择图片后,下一个显示
scope.$apply();
};
scope.sendObj.append('file1', file);
});
}
}
});
相关controllerdemo
小编已经把相关的逻辑demo祛除这里就不太多的解释了,
$scope.sendObj = newFormData();
$scope.sendAll =function () {
$scope.sendObj.append('file1', '');
$scope.sendObj.append('file2', '');
$scope.sendObj.append('file3', '');
$scope.sendObj.append('file4', '');
$scope.sendObj.append('file5', '');
$scope.sendObj.append('file6', '');
$scope.sendObj.append('file7', '');
$scope.sendObj.append('file8', '');
$scope.sendObj.append('file9', '');
$http({
method: 'POST',
url: "
路径",
data:$scope.sendObj,
//上传数据
headers:{'Content-Type': undefined},
transformRequest:angular.identity
}).success(function(response) {
//上传成功的操作
if (response.code ==200) {
;
}
});
};
页面效果(此效果为页面一部分)
![2017年08月10日 2017年08月10日](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
![2017年08月10日 2017年08月10日](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)