AngularJS创建一个上传照片的指令实例代码

2024-12-02 16:29:41

angularJS在近几年发展火热，也无疑是目前市面上来说比较牛逼且成熟的框架，在单页面前端应用当中应该可以说是王者，双向绑定省去了大量的前端代码，控制器在其作用于方面的控制也是相当腻害，今天我们要说的是另外一个比较牛逼的功能，就是angularJS的指令directive，之前没听说过angularJS指令的朋友请自行度娘，随便搜一条文章都比我说的详细，这次用一个我自己写的图片上传的指令来做为案例，详细说明一下实际操作过程中的指令。

之前我们前端的附件上传用的是jqueryFileUpload，每次使用都要在页面把样式画好，然后再控制器中初始化upload组件，上传成功或失败时候还要做相应的处理，这样每次写一个附件上传都要写代码去处理，这样很重复劳动，所以就想利用angularJS的指令把重复劳动的环节给去掉，具体代码如下：

.directive('imageUpload',['Constants',function(Constants){
return {
  restrict: 'E',
  scope: {
    scopeModel:'=',
    title:'@'
  },
  template : '<fieldset>'
      +'<legend>{{title}}<span class="fileinput-button"><span>重新上传</span>'
      +'<input type="file" name="file"></span></legend>'
      + '<span class="profile-picture">'
      + '<img class="img-responsive" alt="{{title}}" ng-src="{{loadImg(scopeModel)}}" style="display: block;"/>'
      + '</fieldset>',
  link : function(scope, element, attrs) {
    $(element).fileupload({
      url: 'file/upload',
      dataType: 'json',
      done: function(e, data) {
        var res = data.result;
        if(res.success){
          scope.scopeModel=res.data.fileKey;
          scope.$apply();
        }
      }
    });
    scope.loadImg=function(key){
      if(undefined==scope.scopeModel || null==scope.scopeModel || scope.scopeModel===''){
        return $.ctx+'/images/noImage.jpg';
      }
      if(scope.scopeModel.indexOf('http://')>-1){
        return scope.scopeModel;
      }
      return $.ctx+'/file/getFile?fileKey='+scope.scopeModel;
    }
  }
};
}]);

指令完成之后在前端页面上只需要写一行代码就可以完成照片的加载（如果是修改页面需要加载出原照片）和上传功能，其中scopeModel是用来双向绑定的，在调用的时候把controller中的model传递进去之后可以实现指令和controller之间的双向绑定，代码中的template为element模板，可以根据具体的样式自己更换（我用的是bootstrap），使用如下：

<image-upload scope-model="imagePath" title="照片上传"></image-upload>

总结

以上所述是小编给大家介绍的AngularJS创建一个上传照片的指令实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

AngularJS 文件上传控件 ng-file-upload详解

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不
学习使用AngularJS文件上传控件

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
angularjs客户端实现压缩图片文件并上传实例

主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString
通过AngularJS实现图片上传及缩略图展示示例

通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"
angularjs实现多张图片上传并预览功能

本文实例为大家分享了angularjs上传多张图片并预览的具体代码,供大家参考,具体内容如下 directive.js /* * 多图片上传及预览指令(需指定图片类名) * */ angular.module('routerModule').directive('fileModel', ['$parse', 'fileReader', function($parse, fileReader) { return { restrict:'A', link:function(scope, elemen
AngularJs上传前预览图片的实例代码

在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长. demo.html: <!doctype html> <html ng-app="myTestCtrl"> <head> <meta charset="UTF-8"> <title>demo&l
angularjs点击图片放大实现上传图片预览

本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
AngularJS创建一个上传照片的指令实例代码

angularJS在近几年发展火热,也无疑是目前市面上来说比较牛逼且成熟的框架,在单页面前端应用当中应该可以说是王者,双向绑定省去了大量的前端代码,控制器在其作用于方面的控制也是相当腻害,今天我们要说的是另外一个比较牛逼的功能,就是angularJS的指令directive,之前没听说过angularJS指令的朋友请自行度娘,随便搜一条文章都比我说的详细,这次用一个我自己写的图片上传的指令来做为案例,详细说明一下实际操作过程中的指令. 之前我们前端的附件上传用的是jqueryFileUpload
Java文件上传下载、邮件收发实例代码

文件上传下载前台: 1. 提交方式:post 2. 表单中有文件上传的表单项: <input type="file" /> 3. 指定表单类型: 默认类型:enctype="application/x-www-form-urlencoded" 文件上传类型:multipart/form-data FileUpload 文件上传功能开发中比较常用,apache也提供了文件上传组件! FileUpload组件: 1. 下载源码 2. 项目中引入jar文件
jQuery多文件异步上传带进度条实例代码

先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)
SpringMVC+Ajax实现文件批量上传和下载功能实例代码

今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了. 上传form: <form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload&q
c# 实现文件上传下载功能的实例代码

NuGet 安装SqlSugar 1.Model文件下新建 DbContext 类 public class DbContext { public DbContext() { Db = new SqlSugarClient(new ConnectionConfig() { ConnectionString = "server=localhost;uid=root;pwd=woshishui;database=test", DbType = DbType.MySql, InitKeyTy
C#实现文件上传及文件下载功能实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: public ActionResult Upload() { // var pathUrl = "http://" + Request.Url.Authority; var file = Request.Files["Filedata"]; var uploadFileName = file.FileName; string filePath = "/File/" + uploadFileNa
Java FTP上传下载删除功能实例代码

在没给大家上完整代码之前先给大家说下注意点: FTP上传下载,容易出现乱码,记得转换 package com.yinhai.team.action; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; impo
Qt实现FTP的上传和下载的实例代码

为了方便网络编程,Qt 提供了 Network 模块.该模块包含了许多类,本文介绍了Qt实现FTP的上传和下载,分享给大家本来想简单抄抄书,随便手写个Ftp客户端的,结果发现教材上的是基于Qt4的QFtp类库,而在Qt5中取消了这一个类库(同时也取消了QHttp等的类),取而代之的是QNetworkAccessManager 这个类,把这些杂货全都揽下来了,据说是因为之前的两个类有重复而且效率有问题balabala.于是就百度了一下,发现百度上要么讲的不全,要么就是要去下一个由热心网民重新封装
Java大文件上传详解及实例代码

Java大文件上传详解前言: 上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中seesiontimeout是30,我把它改成了120.但还是不行,有时候10分钟就崩了. 同事说,可能是客户这里服务器网络波动导致网络连接断开,我觉得有点道理.但是我在本地测试的时候发觉上传也失败,网络原因排除. 看了日志,错误为: java.lang.OutOfMemor
Android上传多张图片的实例代码(RxJava异步分发)

学习RxJava有一段时间了,一直在考虑怎么使用,如何在项目中合理运用它.在android很多项目中,都会存在图片上传,下面我介绍如何用Rxjava异步上传多张图片. 一,用到的框架 compile 'top.zibin:Luban:1.0.9'//图片压缩 compile 'org.xutils:xutils:3.3.34'//网络请求 compile 'io.reactivex:rxandroid:1.1.0'//rxandroid compile 'io.reactivex:rxjava:

AngularJS创建一个上传照片的指令实例代码

相关推荐

随机推荐