html5-angular多个图片同时上传
来源:互联网 发布:胡门网络胡建伟 编辑:程序博客网 时间:2024/06/06 17:45
html5多个图片同时上传相关逻辑
htmldemo
本文模拟发朋友圈的图片上传,这个功能是我项目中的一个实例分享给大家,下面是htmldemo因为我使用的是angular所以‘’upload-image1‘’表示的都是angular中的指令,至于一些样式那就是小伙伴们自由发挥了
指令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)) {
;
returnfalse;
//判断所选文件类型是否为图片
}
varreader = new FileReader();
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 = new FormData();
$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) {
;
}
});
};
页面效果(此效果为页面一部分)
阅读全文
0 0
- html5-angular多个图片同时上传
- html5多个图片同时上传相关逻辑
- Asp.Net同时上传多个图片
- ASP.NET同时上传多个图片
- TCP协议多个用户同时上传图片到服务端
- 同时上传多个文件
- HTML5-WebSocket实现多文件同时上传
- HTML5-WebSocket实现多文件同时上传
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
- 图片上传(angular)
- angular图片上传
- Angular批量上传图片
- php同时上传多张图片
- AFNetWorking同时上传多张图片方式
- jQuery多图片上传同时带预览
- ASP.NET同时上传多个文件
- Elasticsearch数据导入
- 谷歌解决跨域问题
- CSS的组织和管理
- 博客园 首页 新随笔&nbs…
- JAVA互联网架构学习之Listener
- html5-angular多个图片同时上传
- 迅捷CAD转换器把pdf文件转为dwg文件
- html5多个图片同时上传相关逻辑
- 相机标定——标定图片拍摄规范
- ACM集训日记-8月16日
- css三角形
- 【SpringMVC】Marking servlet dispatcherServlet as unavailable
- 六种线程安全的单例模式
- iOS学习之非代码获取iPhone型号及其他信息