AngularJS 的文件上传控件有两个:
(1) angular-file-upload:https://github.com/nervgh/angular-file-upload
(2) ng-file-upload:https://github.com/danialfarid/ng-file-upload

我利用的是ng-file-upload,但是有一问题,有时会在电脑显示卡顿的问题(特别是苹果)。

前端的方式使用简单使用方式如下:页面应用:

<script src="JS/angular.min.js"></script>
<script src="JS/ng-file-upload.min.js"></script>
<script src="JS/ng-file-upload-shim.min.js"></script>

<script>
var app = angular.module('app', ['ngFileUpload']);
app.controller('FileController', function ($scope, Upload) {
  $scope.uploadImg = '';
  //提交
  $scope.submit = function () {
    $scope.upload($scope.file);
  };
  $scope.upload = function (file) {
    $scope.fileInfo = file;
    Upload.upload({
      //服务端接收
      url: 'Ashx/UploadFile.ashx',
      //上传的同时带的参数
      data: {'username': $scope.username},
      //上传的文件
      file: file
    }).progress(function (evt) {
      //进度条
      var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
      console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
    }).success(function (data, status, headers, config) {
      //上传成功
      console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
      $scope.uploadImg = data;
    }).error(function (data, status, headers, config) {
      //上传失败
      console.log('error status: ' + status);
    });
  };
});
</script>

<form ng-controller="FileController">
  <img src="{{uploadImg}}"/>
  前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/>
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

转载于:https://www.cnblogs.com/FineDay/p/7477314.html

angular 上传图像的使用总结相关推荐

  1. 利用Go语言上传图像并生成缩略图

    承前文:Go语言中对图像进行缩放 //利用Go语言上传图像并生成缩略图 func upload(w http.ResponseWriter, req *http.Request, link strin ...

  2. B/S(WEB)系统中使用websocket插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)

    浏览器下使用websocket插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...

  3. 分享三个例程:使用ESP32做一个实时语音对讲机,MQTT协议实现公网对讲,ESP32-CAM 上传图像数据到网络。并附上例程链接。

    分享三个例程:使用ESP32做一个实时语音对讲机,MQTT协议实现公网对讲,ESP32-CAM 上传图像数据到网络.并附上例程链接.可以比对着看来学习NOW,MQTT使用方法.想办法把图像和语音代码融 ...

  4. Php传图缩图,使用以下用于上传图像的PHP代码上传时缩小图像大小

    当然,它工作正常.我在PHP中使用这个类: function thumbnail( $img, $source, $dest, $maxw, $maxh ) { $jpg = $source.$img ...

  5. 使用FormData格式上传图像并预览图片

    前言 做项目时,遇到表单中图像需要跟表单一起提交,这样会造成后台没办法接收到图片.后面上网调查后,明白表单提交时是默认application/x-www-form-urlencoded格式,只接受键值 ...

  6. 完美免费在线去背景图片,便捷变速。在5秒内消除或者替换图像背景,智能调整颜色,所有操作都在浏览器完成,无需上传图像 - BgSub

    相信很多小伙伴都有去图片背景图片的需求,有时候不想打开PS,又不想麻烦美工,还是自己来吧. 今天推荐的这个网站是 bgsub,它是基于机器学习的图像修复方法,自动去除图片背景. 功能 完全自动化,免费 ...

  7. angular上传文件到本地服务器,Angular文件上传示例

    以下为Angular的文件上传示例,分为三个步骤. 步骤一.创建HTML模板 (file-upload.component.html) 简单的创建一个类型为file的input标签,input上添加c ...

  8. angular文件上传php,ajax jquery angular 上传文件与分隔上传

    简单总结下 #ajax上传文件 var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "2.php" ...

  9. c#设置图片的dpi_C#更改上传图像的dpi

    我必须遵循被调用来改变图像分辨率的函数.我想这样做,所以上传的图像例如300dpi将被修改为72dpi(对于web).这个问题与我在这里工作的 another question有关. 我创建了一个扩展 ...

最新文章

  1. eclipse 配置java路径_Java修改eclipse中web项目的server部署路径问题
  2. 三个案例看Nginx配置安全
  3. 把angular(vue等)项目部署在局域网上
  4. 基于ubuntu13.04搜狗输入法安装方法
  5. vue 集成 Loading 加载效果
  6. c语言图像函数怎么用,请教 怎么才能用C输出一个函数的图像?大侠 帮帮忙啊...
  7. 容器编排技术 -- Kubernetes 给容器和Pod分配CPU资源
  8. Sklearn——用Sklearn实现线性回归(LinearRegression)
  9. vue+echart 利用散点图实现柱状时间驻留图
  10. powell法-鲍威尔法详解-附案例matlab代码
  11. eNSP配置VLAN间路由
  12. Vue 使用 Echarts 显示热力地图信息
  13. 什么是cosmos?
  14. Windows 11 找不到文件C:\ProgramData\Package Cache\{xxxx}xxx.exe。请确定文件名是否正确后,再试一次。
  15. [网易编程题] 涂棋盘
  16. 文字转语音软件哪个好?看完这篇你就知道了
  17. 为什么现在java这么难找,现在java工作难找吗
  18. 《VSTO开发入门教程》配套资源下载
  19. 程序的可重用性的概念_可重用的Web应用程序策略:在多个位置运行同一应用程序的三种模式
  20. iOS开发之苹果公司联系邮箱大全

热门文章

  1. DOM对象和jquery对象相互转换
  2. JavaScript文档对象模型DOM节点操作之创建和添加节点(5)
  3. php7版本搭建sqli labs,CentOS 7 LAMP搭建并且部署sqli-labs
  4. wps 甘特图_【WPS神技能】在Excel表格中用图表阶梯式的展示任务进程?找甘特图呀...
  5. p73_万维网和HTTP协议
  6. [leetcode]146. LRU缓存机制
  7. 有向图生成树个数(bzoj 4894: 天赋)
  8. 线性基(bzoj 2460: [BeiJing2011]元素)
  9. GarsiaWachs算法:石子归并问题
  10. kong插件应用(熔断 限流,黑白名单,认证(basic,key,jwt,hmac,),授权,加密,zipkin链路跟踪,日志, prometheus可视化, 爬虫控制插件)