逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值

1.HTML

<input type="file" file-model="myFile">/*AngularJS定义的file-Model属性用于对文件进行操作*/

<img alt="配图预览" ng-src="{{imageSrc}}">/*这里用来放置上传的图片进行预览,ng-src是AngularJS定义替代<img>标签的src属性,其值将在后台逻辑获得*/

2.AngularJS

1)Controller

  .controller('AddarticleCtrl', function ($scope,fileReader) {/*Controller是实际操作html元素的部分*/
$scope.getFile= function () {
fileReader.readAsDataUrl($scope.myFile,$scope)/*注意这里$scope.myFile,要看实际情况,调试发现这里用该调用入参数的myFile属性*/
.then(function (result) {
$scope.imageSrc=result;
});
};
});

2)Directive

 .directive('fileModel', function ($parse) {/*$parse是AngularJS的内置directive*/
return {
restrict: 'A',/*限制该directive的声明方式 为Attribute*/
link: function (scope, element, attrs) {
var model=$parse(attrs.fileModel);
var modelSetter=model.assign;
element.bind('change',function (event) {/*页面加载时执行*/
scope.$apply(function () {/*当用户点击html上的input标签,选中需要上传的图片 然后点击确定后执行*/
modelSetter(scope,element[0].files[0]);
});
scope.getFile();
});
}
};
});

3)Service

 .service('fileReader', function ($q) {
// AngularJS will instantiate a singleton by calling "new" on this function
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 (file,scope) {/*上传图片的主函数*/
var deferred=$q.defer();
var reader=getReader(deferred,scope);
reader.readAsDataURL(file);
return deferred.promise;
}; return{
readAsDataUrl:readAsDataURL
};
});

AngularJS图片上传功能实践的更多相关文章

  1. AngularJS图片上传功能的实现

    一.前言 前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考一下,如果您有更好的 ...

  2. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  3. Ueditor图片上传功能的配置

    之前的项目中碰到过图片上传功能的配置问题,但是没有记录下来,今天有个朋友突然又问到了我这个问题,当时没想起来之前怎么解决的,后来看了Ueditor的官方文档才回想起来. 官网文档巨多,一般大家遇到问题 ...

  4. angularjs图片上传和预览 base64

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

  5. java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  6. drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法二

    drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...

  7. FLASH图片上传功能—从百度编辑器UEditor里面提取出来

    为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...

  8. Dede后台广告管理模块增加图片上传功能插件

    用户问题:网站广告后台管理非常方便,但是织梦后台的广告管理模块,发布广告时图片没有上传选项,只能用URL地址,很不方便,那么织梦帮就教大家一个方法实现广告图片后台直接上传,非常方便.先给大家看下修改后 ...

  9. 图片上传功能<转>http://blog.csdn.net/u011159417/article/details/50126023

    以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就 ...

随机推荐

  1. [LeetCode]640解方程式

    问题描述: 示例 1: 输入: "x+5-3+x=6+x-2" 输出: "x=2" 示例 2: 输入: "x=x" 输出: "In ...

  2. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  3. 用AOP思想改造一个服务器的数据存储

    背景是有一个游戏服务器一直以来都是写SQL的, 后来改过一段时间的redis, 用的是别的员工写的类orm方式将实体类型映射成各种key-value对进行写入, 但是仍有一个缺点就是需要在增\删\改的 ...

  4. StringBuffer、StringBuilder、冒泡与选择排序、二分查找、基本数据类型包装类_DAY13

    1:数组的高级操作(预习) (1)数组:存储同一种数据类型的多个元素的容器. (2)特点:每个元素都有从0开始的编号,方便我们获取.专业名称:索引. (3)数组操作: A:遍历 public stat ...

  5. apt 下载安装包

    1) Try both without sudo, apt-get download will pass and apt-get -d install will fail (root required ...

  6. hadoop2.7的目录结构

    1.$HADOOP_HOME/bin目录下文件及作用 文件名称 说明 hadoop 用于执行hadoop脚本命令,被hadoop-daemon.sh调用执行,也可以单独执行,一切命令的核心 2.$HA ...

  7. 全网最详细的Hadoop HA集群启动后,两个namenode都是active的解决办法(图文详解)

    不多说,直接上干货! 这个问题,跟 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 是大同小异. 欢迎大家,加入我的微信公众号:大数据躺过的坑  ...

  8. poj1330-----------关于公共祖先的问题

    关于公共祖先的问题分类: 这类问题有多种解法和类型,根据题目给出的信息去判断使用哪一种 1.给你树,只支持从父亲找儿子,不支持儿子找父亲,最后要求最近公共祖先,使用dfs或者分治 2.支持儿子找父亲, ...

  9. 轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  10. 配置Zookeper

    在整个的codis架构之中,codis-proxy将作为所有的codis-server的对外的代理,而在整个的处理之中,codis-proxy所保存的数据一定是所有的codis-server的信息,那 ...