angular-file-upload

AngularJS 文件上传工具
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 AngularJS 扩展
软件类型 开源软件
地区 不详
投 递 者 金令秋
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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.
  };
}];


  • angular-file-upload 是AngularJs框架的一个模块。能够处理文件上传的相关操作,包括选择要上传的文件,筛选要上传的文件或是显示上传的进度等。 一,使用的准备。 1,包的安装。 在命令行中输入相关指令就可以安装。 npm install angular-file-upload 或是 bower install angular-file-upload 2,模块的依赖。 在总的

  • 1.官方链接 https://github.com/nervgh/angular-file-upload 2.安装到项目中  bower install angular-file-upload(安装完成后,记得html中添加js文件引用) 3.html部分 <div class="form-group"> <input type="file" file-model="myFil

  • 项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下。在这里简单回顾一下自己使用的插件的部分功能和需要注意的事项。 1.引入angular-file-upload.js,放在angular js 之后。 2.将文件注入angular js 的模块中,如 var app =  angu

  •       公司项目用到AngularJS,做批量文件上传,研究了一下,准备用angular-file-upload插件来实现,由于AngularJS也是刚刚接触,很多东西不熟,查阅了大量博客、文档,修改了例子中的错误,最后实现了效果,记录一下,为新手填些坑。 查考博客: http://bbs.csdn.net/topics/392037244 http://blog.csdn.net/w4105

  • 最近项目中需要用到文件上传,使用了angular-file-upload插件完成 首先来介绍下这个插件的一些属性(参考官方文档) FileUploader 属性 url {String}: 上传文件的服务器路径 alias {String}:  包含文件的名称,默认是file queue {Array}: 上传队列 progress {Number}: 上传队列的进度,只读 headers {Ob

  • 不了解angular-file-upload基础使用 请先参考http://blog.csdn.net/lai_xu/article/details/49535847 博客地址 下文如果有更好的建议请多多评论 1. directive.js中的指令编写 /* 上传插件 */ app.directive('myUpload', function (FileUploader) { va

  • https://github.com/nervgh/angular-file-upload 下载地址 在文件 菜单栏有对应文件 转载于:https://www.cnblogs.com/yclblog/p/7093553.html

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

 相关资料
  • 本文向大家介绍Angular angular-file-upload文件上传的示例代码,包括了Angular angular-file-upload文件上传的示例代码的使用技巧和注意事项,需要的朋友参考一下 问题描述 附件上传 检定结果以附件形式上传。 这里先不考虑api。 实现的任务就是,点击选择文件,选择之后可以清楚掉该文件。 插件介绍 用到了项目映入过的一个插件,angular-file-u

  • Web应用程序需要提供允许文件上载的功能。 让我们看看如何从客户端接收文件并将它们存储在我们的服务器上。 我们已经使用koa-body中间件来解析请求。 此中间件还用于处理文件上载。 让我们创建一个表单,允许我们上传文件,然后使用Koa保存这些文件。 首先使用以下内容创建名为file_upload.pug的模板。 html head title File uploads b

  • 在Laravel中上传文件非常简单。 我们需要做的就是创建一个视图文件,用户可以选择要上载的文件和处理上传文件的控制器。 在视图文件中,我们需要通过添加以下代码行来生成文件输入。 Form::file('file_name'); 在Form :: open()中,我们需要添加'files'=》'true' ,如下所示。 这有助于将表单上载到多个部分。 Form::open(array('url'

  • 我们提供了上传文件的示例。 为了开发这个应用程序,我们使用了HTML,CSS和AngularJS。 以下示例显示了如何使用AngularJS上载文件。 <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script

  • ASP.NET有两个控件,允许用户将文件上传到Web服务器。 一旦服务器收到发布的文件数据,应用程序就可以保存,检查或忽略它。 以下控件允许上传文件: HtmlInputFile - 一个HTML服务器控件 FileUpload - 和ASP.NET Web控件 这两个控件都允许文件上载,但FileUpload控件自动设置表单的编码,而HtmlInputFile不会这样做。 在本教程中,我们使用F

  • 使用File Uploading类,我们可以上传文件,我们也可以限制要上传的文件的类型和大小。 按照给定示例中显示的步骤了解CodeIgniter中的文件上载过程。 例子 (Example) 复制以下代码并将其存储在application/view/Upload_form.php 。 <html> <head> <title>Upload Form</title> </

  • 通常,网络应用程序能够上传文件(个人资料图片,歌曲,PDF格式,单词.....)非常有用。 我们将在本章讨论如何上传文件。 上传图片 在开始播放图像之前,请确保已安装Python Image Library(PIL)。 现在为了说明上传图片,让我们在myapp/forms.py中创建一个配置文件表单 - #-*- coding: utf-8 -*- from django import forms

  • 在Flask中处理文件上传非常简单。 它需要一个HTML表单,其enctype属性设置为'multipart/form-data',将文件发布到URL。 URL处理程序从request.files[]对象中提取文件并将其保存到所需位置。 在将实际保存到其最终位置之前,每个上载的文件首先保存在服务器上的临时位置。 目标文件的名称可以是硬编码的,也可以从request.files[file]对象的fi