AngularJs异步文件上传
2019独角兽企业重金招聘Python工程师标准>>>
作者更新得似乎挺勤快的,先预览下代码:
<script src="angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="angular-file-upload-shim.min.js"></script>
<script src="angular-file-upload.min.js"></script> <div ng-app="fileUpload" ng-controller="MyCtrl">watching model:<div class="button" ng-file-select ng-model="files">Upload using model $watch</div><div class="button" ng-file-select ng-file-change="upload($files)">Upload on file change</div>Drop File:<div ng-file-drop ng-model="files" class="drop-box" drag-over-class="dragover" ng-multiple="true" allow-dir="true"accept=".jpg,.png,.pdf">Drop Images or PDFs files here</div><div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
</div>
```
```javascript
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['angularFileUpload']);app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) {$scope.$watch('files', function () {$scope.upload($scope.files);});$scope.upload = function (files) {if (files && files.length) {for (var i = 0; i < files.length; i++) {var file = files[i];$upload.upload({url: 'upload/url',fields: {'username': $scope.username},file: file}).progress(function (evt) {var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);}).success(function (data, status, headers, config) {console.log('file ' + config.file.name + 'uploaded. Response: ' + data);});}}};
}]);
```
详细用法请移步至作者的GitHub页面:[https://github.com/danialfarid/ng-file-upload](https://github.com/danialfarid/ng-file-upload)
转载于:https://my.oschina.net/u/2324376/blog/386122
AngularJs异步文件上传相关推荐
- angularjs php上传文件,AngularJS 文件上传 的功能你了解的多少?几分钟就让你了解angularjs的文件上传...
本篇文章主要的讲述了angularjs的文件上传功能,大家又不懂都可以来看,希望能帮助到大家.下面就让我们一起来看这篇文章吧 问题描述附件上传 检定结果以附件形式上传. 这里先不考虑api. 实现的任 ...
- nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析
Ajax异步文件上传与NodeJS express服务端处理的示例分析 发布时间:2021-07-24 11:17:21 来源:亿速云 阅读:79 作者:小新 这篇文章主要介绍Ajax异步文件上传与N ...
- 基于Python Flask框架+jquery Ajax技术实现的增删改查(CRUD)+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能 登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面 注册界面,用的bootstrop的弹窗,用户名和密 ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传
异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFile ...
- angularjs java 文件上传_学习使用AngularJS文件上传控件
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jque ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- php异步上传,php中通过Ajax如何实现异步文件上传的代码实例
1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据 ...
- jqury实现异步文件上传
采用jQuery和jQuery.form实现异步上传文件 html代码: <body><form id="async" enctype="multipa ...
最新文章
- 太牛了!22岁本科生Github上开源的后台管理系统,太实用(附源码)!
- 非著名架构师告诉你,代码该如何写,才能自己写的容易别人看的也不痛苦
- Deepin下配置JDK8
- Android 7.0使用私有NDK库的问题
- spanning-tree extend system-id
- [BZOJ1565]植物大战僵尸
- 有谁了解 最基础的计算机的网络结构呢?
- 区块链中的基础数据结构
- python声明编码_Python 2.x 编码声明:是coding:utf-8还是coding=urf-8呢
- html菜鸟教程zoom,插件 jQuery.panzoom 中文API文档
- 基于Echarts的图表绘制
- 软件中断SWI的实现
- 使用什么协议扫描服务器端口,服务器端口扫描
- 前端开发 基础知识 dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
- C#中如何使用Sqlite、SqliCe等本地数据库?
- 遥感影像基于样本的面向对象分类方法
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
- TCP/IP 详解(第 2 版) 笔记 / 3 链路层 / 3.2 以太网与 IEEE 802 LAN/MAN 标准 / 3.2.2 以太网帧格式
- 定制 kali nethunter内核 (官方不支持的手机)
- DDR和MIG使用小结
热门文章
- 【Maven学习】Nexus私服代理其他第三方的Maven仓库
- SimpliVity:我是你的完美选择,HPE!
- pip安装模块警告InsecurePlatformWarning: A true SSLContext object is not available.
- JNI/NDK开发指南(八)——调用构造方法和父类实例方法
- [LeetCode] Factorial Trailing Zeroes
- oracle 触发器 学习笔记
- ssh_exchange_identification: Connection closed by remote host 问题的解决 (转)
- CASS 7.1 和 AutoCAD 2006的安装使用
- 小程序点击按钮 关闭小程序
- jrtplib 分包处理