关键词：
一、前言
前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，当时查阅文档(都是英文文档)折腾了很久才弄出来，现将整个流程整理出来，有需要的朋友可以参考一下，如果您有更好的方法，欢迎留言交流~~话不多说直接看实现。
二、具体实现
1、html标签结构
input文件上传标签，div包裹的img标签为图片预览区域
2、定义directive
angular.module('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];
scope.getFile();
});
}
};
}]);
input标签中的属性file-model即就是Angular中的指令，在上面代码的link方法中，我们为指令file-model所在的元素绑定了change事件，change方法中获取到要上传的文件对象，并调用了controller中的getFile()方法(详见controller)
3、定义控制器UploaderControler
angular.module('app')
.controller('UploaderController', function($scope, fileReader){
$scope.getFile = function () {
fileReader.readAsDataUrl($scope.file, $scope)
.then(function(result) {
$scope.imageSrc = result;
});
};
})
控制器中定义了一个UploaderController，该控制器在其作用域中定义了getFile()方法，getFile方法中调用了fileReader service中的readAsDataUrl方法，此方法中生成了图片的地址url，并将结果返回getFile中，将返回的url赋值给$scope.imageSrc ，根据Angular双向数据绑定的机制，img元素中ng-src属性值为url，那么就可以在页面上预览图片了。fileReader service是如何定义的呢？
4、定义service fileReader
angular.module('app')
.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 (file, scope) {
var deferred = $q.defer();
var reader = getReader(deferred, scope);
reader.readAsDataURL(file);
return deferred.promise;
};
return {
readAsDataUrl: readAsDataURL
};
}])
fileReader service主要是完成生成获取到的文件的url地址，返回到view进行预览。
5、附件上传的实现
附件上传主要是将页面表单数据通过后台提供的接口写入到数据库中，具体实现在控制器UploaderControler中增加如下代码：
// 组装表单数据
var postData = {
vacationType: $scope.leave.type,
reason: $scope.leave.reason,
familyRelation: +$scope.leave.type == 7 ? $scope.leave.relation : "",
startTime: startTime,
endTime: endTime,
fileName: $scope.myFile,
workDelivers: workDelivers,
ccmailNickNames: sendPersons,
realDays: +$scope.leave.type == 8 ? $scope.leave.timeLong : ""
};
var promise = postMultipart('/maldives/leave/save', postData);
function postMultipart(url, data) {
var fd = new FormData();
angular.forEach(data, function(val, key) {
fd.append(key, val);
});
var args = {
method: 'POST',
url: url,
data: fd,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
};
return $http(args);
}
postData为表单中的数据(包括上传的图片信息)，'/maldives/leave/save'表示的是请求后台的数据接口，$http是Angular内置的service，能向后台发送GET或POST请求。
三、对Angular中service、controller、directive的认识和理解
Service就是单例对象在AngluarJS 中的一个别名。这些单例对象会被经常传来传去，保证你每次访问到的都是同一个实例。基于这种思想，单例对象让我们可以实现一些相当酷的功能，它可以让很多controller和directive访问其内部的数值。
controller把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。
Angular对directive的定义是一段代码片段，你可以用它来操作DOM，也可以使用它来进行用户交互。
node实现上传图片功能
1.上传图片的功能点基础功能：上传图片、生成图片连接附加功能：限制上传图片的大小与类型、生成高中低三种分辨率的图片链接、生成CDN。2.技术方案阿里云OSS等服务器（花钱）直接上传服务器（不稳定，可以学习时使用）3.... 查看详情
wcf实现上传图片功能
初次学习实现WCFwinform程序的通信，主要功能是实现图片的传输。下面是实现步骤：第一步：首先建立一个类库项目TransferPicLib，导入wcf需要的引用System.ServiceModel，建立接口ITransferPicService，建立类文件TransferPicService实现ITransferPicS... 查看详情
（转）淘淘商城系列——实现图片上传功能
...单的文件上传操作测试，淘淘商城项目中添加商品时上传图片的功能还没实现，如下图所示。本文将花大量笔墨来教大家如何实现图片上传这个功能。 我们来看下item-add.jsp页面，可以看到上传图片触发的方法是通过叫做picFil... 查看详情
eggjs怎么实现上传图片（头像）接口功能？
...意的问题。这里顺便说一下，注册的时候去掉默认的图片头像了，还有默认的签名。图片上传到服务器的逻辑首先前端调用上传接口，将上传的资源经过FormData实例封装之后，传给服务端在服务端接收前端传进来... 查看详情
微信js-sdk实现上传图片功能
最近在项目开放中，有一个在微信WEB项目中上传图片的需求，一开始使用了传统的<inputtype="file">的方式去实现，但是后面发现在使用这种传统模式时会由于手机系统的差异而导致一系列的问题，后改用微信JSSDK的方式来... 查看详情
js实现的图片预览功能
之前的博文有实现过图片上传预览，但那种方法是预览时就将图片上传，会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览，就说用js将上传的图片显示，上传代码在之前的博文中有写到。以下是实现的代码：body... 查看详情
js实现图片上传预览功能，使用base64编码来实现
实现图片上传的方法有很多，这里我们介绍比较简单的一种，使用base64对图片信息进行编码，然后直接将图片的base64信息存到数据库。但是对于系统中需要上传的图片较多时并不建议采用这种方式，我们一般会选择存图片路径的... 查看详情
django实现上传图片功能(代码片段)
很多时候我们要用到图片上传功能，如果图片一直用放在别的网站上，通过加载网址的方式来显示的话其实也挺麻烦的，我们通过使用django-filer这个模块实现将图片文件直接放在自己的网站上。感兴趣的同学可以看下官方介... 查看详情
qq空间发表日志的图片上传功能实现
w本地多图预览、多图上传、排序，用户仅需两次操作：决定选哪几张图和图的顺序，尽量减少用户操作。 查看详情
从零开始的springboot的helloword，并实现图片上传功能
...考技术A最近因需要快速搭建一个后台，目标功能为实现图片上传功能，然后通过Java后台调用Python模块运行，返回运行结果显示。由于对后台功能要求简单，可创建最简单的springbootdemo即可。此处注意@RequestMapping("/index")中路径“/... 查看详情
基于layui的图片上传前预览功能的2种实现方式(代码片段)
...的功能：选择文件后---点击文件名，页面中间弹窗内预览图片，先看效果图：预览功能的实现具体有2种方式：第一种是用blob+FileReader，第二种是layUI自带的。1.用layUI自带的参数实现图片预览：layui.use(‘upload‘,function()...choose:func... 查看详情
servlet实现单个图片，多个图片上传和图片的显示功能(代码片段)
注意：servlet3.0以后才有request.getPart("")这个方法，tomcat7的环境下就没有part.getSubmittedFileName()这一方法，无法直接获取文件名建立upFile.html或者jsp文件进行相关的上传使用form表单进行相关的上传功能里面设置enctype... 查看详情
如何使用php实现图片批量上传功能
表单里多添加几个文件上传的FILE按钮就OK乐，，后台循环一下，循环上传就OK了，，参考技术A一个框里添加很多文件只有用flash 参考技术B没学过.... 查看详情
javaweb实现上传头像功能，
...一个外网地址，每次访问的其实是其中的一台主机当上传图片时需要将本地的图片同时上传到其他的主机上，这个我知道怎么实现我用的是FTPclient类。现在的问题是在服务器上当我想把文件转换成文件流时newFile(path)时不能识别... 查看详情
node实现图片上传功能(代码片段)
方式一以流的形式上传图片直接返回路径，这样写：好处：方便处理存取数据返回路径不好的地方：可能冗余，上传的文件后面并未使用1.用koa-body中间件注：如果已经使用了koa-bodyParser中间件，请remove此中间件，koa-body可以代替k... 查看详情
node+express+multer实现图片上传附源码
...，我是CoderBin，最近在做一个Vue项目，其中涉及到了头像图片上传。由于之前没做过图片上传功能，所以在实现这个功能时着实遇到了不少坑。本次打算将实现过程以博文的形式分享给大家。实现过程将以项目驱动的方式，手把... 查看详情
angularjs上传图片
上传图片需要引入插件ngFileUpload，使用bower安装方法：bowerinstall ng-file-upload--save,安装后需要在命名app的名字js文件中注入，如下所示：(function(){angular.module(‘app‘,[‘ionic‘,‘ngStorage‘,‘ngFileUpload‘]);})();在相应的html中引入... 查看详情
demo：servlet实现图片的上传
一个简单的servlet例子，实现图片的上传功能，上传的图片给?HttpServletResponse对象publicclassBackGroundLogoServletextendsHttpServlet{privatestaticfinalLoggerm_logger=Logger.getLogger(BackGroundLogoServlet.class);@Overridepublicvo 查看详情