AngularJS 文件上传工具 angular-file-upload

MIT
JavaScript
跨平台
2014-11-03
叶秀兰

angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。

在线演示

特性

  • 支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS, PUT(html5)/POST 方法

  • 支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5non-HTML5) 。允许客户端在上传之前验证或者修改文件。

  • 当文件的内容类型使用 $upload.http()时,支持直接上传到 CouchDB,imgur 等等。支持 Angular http POST/PUT 请求的进度事件,更多内容请看 #88(comment)

  • Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)

  • 轻量级,使用常规的 $http 来上传(支持非 HTML5 浏览器),所以提供所有 Angular $http 功能

使用

HTML:

            drop files here  HTML5 Drop File is not supported!  Cancel Upload

JS:

//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        //method: 'POST' or 'PUT',
        //headers: {'header-key': 'header-value'},
        //withCredentials: true,
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files ($files) for html5 only
        //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
        // customize file formData name ('Content-Disposition'), server side file variable name. 
        //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' 
        // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
        //formDataAppender: function(formData, key, val){}
      }).progress(function(evt) {        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {        // file is uploaded successfully
        console.log(data);
      });      //.error(...)
      //.then(success, error, progress); 
      // access or attach event listeners to the underlying XMLHttpRequest.
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})
    }    /* alternative way of uploading, send the file binary with the file's content-type.       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.        It could also be used to monitor the progress of a normal http post/put request with large data*/
    // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
  };
}];


加载中

评论(2)

hantsy
hantsy
用了华硕。。。 angular-file-upload
Say素描
Say素描
这个angular-file-upload-shim.min.js没法下载啊! #angular-file-upload#

暂无资讯

3
回答
angular-file-upload-shim.min.js没法下载

这个angular-file-upload-shim.min.js没法下载啊!

2015/11/30 17:21
1
回答
angular-file-upload 实现上传能力,包括图片和其他文件

vs2013 C# Razor视图 实现angular-file-upload脚本的上传功能,包括图片和其他文件 可以的话给一个这个环境下的例子,谢谢! ...

2014/12/09 16:21

没有更多内容

加载失败,请刷新页面

没有更多内容

angular好用的插件集合

首先介绍两个学习Angular的学习资源AngularJS-Learning还有recipes-with-angular-js-examples。 两个编写Angular的代码规范,分别是angularjs-styleguide和angular-styleguide 项目文件结构生...

2017/10/18 17:31
33
0
ngChange

ngChange

2015/10/27 15:23
28
0
angularJS依赖注入时候的顺序问题

angularJS引入的module总是null,,跟官方demo差不多的代码还是会出现null

2014/06/26 22:22
4K
0
实例解说AngularJS在自动化测试中的应用

7月25日晚8点,线上直播,【AI中台——智能聊天机器人平台】,点击了解详情。 一、什么是AngularJS ? 1、AngularJS是一组用来开发web页面的框架、模板以及数据绑定和丰富UI的组件; 2、Angul...

07/16 11:38
296
0
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d...

2014/12/03 08:49
55
0
angular fileUploader 中文API

Directives(指令) nv-file-drop <!-- 最少配置 --> <elementnv-file-dropuploader="{FileUploader}"></element> <!-- 最多配置 --> <elementnv-file-dropuploader="{FileUploader}"options...

2017/10/31 19:59
70
0
Migrating a SpringWebMVC App from JSP to AngularJS

Migrating a Spring Web MVC application from JSP to AngularJS Engineering Michael Isvy August 19, 2015 Note on authors This post is a guest post by Han Lim and Tony Nguyen. Han a...

2015/08/24 17:56
220
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部