angularjs 图片上传
<input type="file" file-model="myFile"/>
<div class="col-md-12">
<img ng-src="{{imageSrc}}" style="max-width:68px;max-height:68px;display:block;" />
</div>
//controller
$scope.getFile = function (files) {
console.log(files);
fileReader.readAsDataUrl(files, $scope)
.then(function (result) {
$scope.imageSrc = result;
console.log(result);
});
};
$scope.leaveSubmit = function (e) {
console.log($scope.messages);
if ($scope.messages ==='' || $scope.messages === undefined){
$ionicLoading.show({
template: '请填写您的需求!',
duration: 2000,
showBackdrop: false
});
return;
}
var data = {
fileName: $scope.imageSrc
// userFeedback: $scope.userFeedback.message
};
var fd = new FormData();
angular.forEach(data, function(val, key) {
fd.append(key, val);
});
$http({
url: "",
data: fd,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
}).success(function (res) {
console.log('1'+ res);
}).error(function (err) {
console.log(err);
$rootScope.showMsg("网络错误");
})
};
app.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs, ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function (event) {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
//附件预览
scope.file = (event.srcElement || event.target).files[0];
console.log(scope.file);
scope.getFile(scope.file);
});
}
};
}]);
Mine.factory('fileReader', ["$q", "$log", function ($q, $log) {
var onLoad = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.resolve(reader.result);
});
};
};
var onError = function (reader, deferred, scope) {
return function () {
scope.$apply(function () {
deferred.reject(reader.result);
});
};
};
var getReader = function (deferred, scope) {
var reader = new FileReader();
reader.onload = onLoad(reader, deferred, scope);
reader.onerror = onError(reader, deferred, scope);
return reader;
};
var readAsDataURL = function (files, scope) {/*上传图片的主函数*/
console.log(files);
var deferred = $q.defer();
var reader = getReader(deferred, scope);
reader.readAsDataURL(files);
return deferred.promise;
};
return {
readAsDataUrl: readAsDataURL
};
}]);
angularjs 图片上传的更多相关文章
- angularjs图片上传和预览 base64
angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...
- angularjs图片上传后不刷新的解决办法
刚接触angularjs在使用的过程中遇到这个问题 首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定 .directive("cImg", ['appUrl', ...
- angularjs图片上传和预览 - ng-file-upload
ng-file-upload ajax上传文件 官方demo地址 安装 bower install ng-file-upload-shim --save(for non html5 suppport) ...
- angularJS+Ionic移动端图片上传的解决办法
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
随机推荐
- array group by key javascript
array group by key javascript calendar Array.reduce https://developer.mozilla.org/en-US/docs/Web/Jav ...
- 关于USDN你想知道的一切
稳定币的发展只有短短几年的时间.稳定币最早起源于 2014 年 Bitfinex 组建的泰德公司发行的 USDT.稳定币是一种具有稳定价值的加密货币.稳定币诞生的背景是加密货币的价格波动巨大,其作为一 ...
- Masterboxan INC发布印尼电商市场报告
据海外媒体报导,Masterboxan INC(编号:20151264097)发布了印尼电商市场观察报告,指出印尼电商市场仍然有很大的发展潜力. Masterboxan INC表示,与发达国家从 PC ...
- 25_MySQL 数据操作语言:UPDATE语句
-- UPDATE 把每个员工的编号和上司的编号都加1,用 ORDER BY 完成 UPDATE t_emp SET empno=empno+1,mgr=mgr+1 ORDER BY empno DE ...
- C++实现String类
1 #include<iostream> 2 #include<cstring> 3 4 class String 5 { 6 public: 7 String(); 8 St ...
- 开源OA办公平台搭建教程:O2OA表单中的事件
1. 概述 我们设计表单的时候经常会有这样的需求:在表单或者组件加载前/加载后,能够执行一些脚本来改变表单或组件的样式和行为.或者用户在点击组件的时候能够执行脚本.表单的事件就是为这样的场景而设计. ...
- Django的视图层和模板层
目录 一.视图层 1. 小白必会三板斧 2. JsonResponse 3. FBV与CBV 3.1 FVB 3.2 CBV 4. CBV的源码 5. 给CBV加装饰器 二.模板层 1. 模板语法 2 ...
- Linux常用操作命令之文件权限(二)
一.基本概念 Linux/Unix是多用户系统:root是超级用户,拥有最高权限,其他用户及权限由root管理.文件/目录的权限有三种,可读read(r)可写write(w)可执行excute(x). ...
- C++对象的生存期笔记
下面随笔记录了C++对象的生存期知识 静态生存期 这种生存期与程序的运行期相同. 在文件作用域中声明的对象具有这种生存期. 在函数内部声明静态生存期对象,要冠以关键字static . 动态生存期 块作 ...
- SpringMVC-01 什么是SpringMVC
SpringMVC-01 什么是SpringMVC 回顾MVC 1.什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务逻辑 ...