<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 图片上传的更多相关文章

  1. angularjs图片上传和预览 base64

    angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...

  2. angularjs图片上传后不刷新的解决办法

    刚接触angularjs在使用的过程中遇到这个问题 首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定 .directive("cImg", ['appUrl', ...

  3. angularjs图片上传和预览 - ng-file-upload

    ng-file-upload ajax上传文件 官方demo地址 安装 bower install ng-file-upload-shim --save(for non html5 suppport) ...

  4. angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...

  5. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  6. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  7. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

随机推荐

  1. Redis-第九章节-动态字符串

    目录 概述 SDS(动态字符串) SDS(动态字符串)与c语言字符串的区别 1.概述 String类型底层实现的简单动态字符串sds,是可以修改的字符串.它采用预分配冗余空间的方式来减少内存的频繁分配 ...

  2. 死磕Spring之IoC篇 - 文章导读

    该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读 Spring 版本:5.1. ...

  3. eclipse从接口快速跳转到实现类

    1.只跳转到实现类上 按住Ctrl键,把鼠标的光标放在要跳转的接口上面,选择第二个 2.直接跳转大实现的方法上 按住Ctrl键,把鼠标的光标放在要跳转的方法上面,选择第二个 对比可以发现,操作都是一样 ...

  4. 第31天学习打卡(File类。字符流读写文件)

    File类 概念 文件,文件夹,一个file对象代表磁盘上的某个文件或者文件夹 构造方法  File(String pathname) File(String parent,String child) ...

  5. 后端程序员之路 1、linux、centos

    CentOS.Ubuntu.Debian三个linux比较异同 - 记事本 - 博客频道 - CSDN.NEThttp://blog.csdn.net/educast/article/details/ ...

  6. 微信小程序input框去除空格

    //去除空格 <input type='text' data-name='account' value='{{account}}' name="account" bindin ...

  7. 2.2 Python3基础-基本数据类型

    >>返回主目录 源代码 # 基本数据类型 # Number类型:如何查看变量的数据类型? name = 'Portos' print(type(name)) # 结果:str print( ...

  8. MyBatis中的Map

    接口 int addUserMap(Map<String, Object> map); Mapper.xml <!-- Map比较灵活 传递的值为Map的key,可以为任何(野路子, ...

  9. C#类中的成员

    @ 目录 字段 属性 方法 构造函数 类和对象的简单解释 创建类和对象 类中成员的归属问题 字段 字段的声明与声明变量类似,可以添加访问修饰符,通常情况下字段设置为私有的,然后定义属性对字段的读写进行 ...

  10. 在Linux上从零开始部署前后端分离的Vue+Spring boot项目

    最近做了一个前后端分离的商城项目来熟悉开发的整个流程,最后希望能有个正式的部署流程,于是试着把项目放在云服务器上,做了一下发现遇到了不少问题,借此记录一下整个部署的过程. 使用的技术栈如标题所说大体上 ...