angular 上传图像的使用总结
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 上传图像的使用总结相关推荐
- 利用Go语言上传图像并生成缩略图
承前文:Go语言中对图像进行缩放 //利用Go语言上传图像并生成缩略图 func upload(w http.ResponseWriter, req *http.Request, link strin ...
- B/S(WEB)系统中使用websocket插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)
浏览器下使用websocket插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...
- 分享三个例程:使用ESP32做一个实时语音对讲机,MQTT协议实现公网对讲,ESP32-CAM 上传图像数据到网络。并附上例程链接。
分享三个例程:使用ESP32做一个实时语音对讲机,MQTT协议实现公网对讲,ESP32-CAM 上传图像数据到网络.并附上例程链接.可以比对着看来学习NOW,MQTT使用方法.想办法把图像和语音代码融 ...
- Php传图缩图,使用以下用于上传图像的PHP代码上传时缩小图像大小
当然,它工作正常.我在PHP中使用这个类: function thumbnail( $img, $source, $dest, $maxw, $maxh ) { $jpg = $source.$img ...
- 使用FormData格式上传图像并预览图片
前言 做项目时,遇到表单中图像需要跟表单一起提交,这样会造成后台没办法接收到图片.后面上网调查后,明白表单提交时是默认application/x-www-form-urlencoded格式,只接受键值 ...
- 完美免费在线去背景图片,便捷变速。在5秒内消除或者替换图像背景,智能调整颜色,所有操作都在浏览器完成,无需上传图像 - BgSub
相信很多小伙伴都有去图片背景图片的需求,有时候不想打开PS,又不想麻烦美工,还是自己来吧. 今天推荐的这个网站是 bgsub,它是基于机器学习的图像修复方法,自动去除图片背景. 功能 完全自动化,免费 ...
- angular上传文件到本地服务器,Angular文件上传示例
以下为Angular的文件上传示例,分为三个步骤. 步骤一.创建HTML模板 (file-upload.component.html) 简单的创建一个类型为file的input标签,input上添加c ...
- angular文件上传php,ajax jquery angular 上传文件与分隔上传
简单总结下 #ajax上传文件 var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "2.php" ...
- c#设置图片的dpi_C#更改上传图像的dpi
我必须遵循被调用来改变图像分辨率的函数.我想这样做,所以上传的图像例如300dpi将被修改为72dpi(对于web).这个问题与我在这里工作的 another question有关. 我创建了一个扩展 ...
最新文章
- eclipse 配置java路径_Java修改eclipse中web项目的server部署路径问题
- 三个案例看Nginx配置安全
- 把angular(vue等)项目部署在局域网上
- 基于ubuntu13.04搜狗输入法安装方法
- vue 集成 Loading 加载效果
- c语言图像函数怎么用,请教 怎么才能用C输出一个函数的图像?大侠 帮帮忙啊...
- 容器编排技术 -- Kubernetes 给容器和Pod分配CPU资源
- Sklearn——用Sklearn实现线性回归(LinearRegression)
- vue+echart 利用散点图实现柱状时间驻留图
- powell法-鲍威尔法详解-附案例matlab代码
- eNSP配置VLAN间路由
- Vue 使用 Echarts 显示热力地图信息
- 什么是cosmos?
- Windows 11 找不到文件C:\ProgramData\Package Cache\{xxxx}xxx.exe。请确定文件名是否正确后,再试一次。
- [网易编程题] 涂棋盘
- 文字转语音软件哪个好?看完这篇你就知道了
- 为什么现在java这么难找,现在java工作难找吗
- 《VSTO开发入门教程》配套资源下载
- 程序的可重用性的概念_可重用的Web应用程序策略:在多个位置运行同一应用程序的三种模式
- iOS开发之苹果公司联系邮箱大全
热门文章
- DOM对象和jquery对象相互转换
- JavaScript文档对象模型DOM节点操作之创建和添加节点(5)
- php7版本搭建sqli labs,CentOS 7 LAMP搭建并且部署sqli-labs
- wps 甘特图_【WPS神技能】在Excel表格中用图表阶梯式的展示任务进程?找甘特图呀...
- p73_万维网和HTTP协议
- [leetcode]146. LRU缓存机制
- 有向图生成树个数(bzoj 4894: 天赋)
- 线性基(bzoj 2460: [BeiJing2011]元素)
- GarsiaWachs算法:石子归并问题
- kong插件应用(熔断 限流,黑白名单,认证(basic,key,jwt,hmac,),授权,加密,zipkin链路跟踪,日志, prometheus可视化, 爬虫控制插件)