ng-file-upload - samples

<script src="angular.min.js"></script>
<!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
<script src="ng-file-upload-shim.min.js"></script>
<script src="ng-file-upload.min.js"></script>

Upload on form submit or button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  Single Image with validations
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="‘image/*‘"
    ngf-accept="‘image/*‘" ngf-max-size="20MB" ngf-min-height="100"
    ngf-resize="{width: 100, height: 100}">Select</div>
  Multiple files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

Upload right away after file selection:
<div class="button" ngf-select="upload($file)">Upload on file select</div>
<div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
  Drop File:
<div ngf-drop="uploadFiles($files)" class="drop-box"
  ngf-drag-over-class="‘dragover‘" ngf-multiple="true"
  ngf-pattern="‘image/*,application/pdf‘">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

Image thumbnail: <img ngf-thumbnail="file || ‘/thumb.jpg‘">
Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

Javascript code:

//inject directives and services.
var app = angular.module(‘fileUpload‘, [‘ngFileUpload‘]);

app.controller(‘MyCtrl‘, [‘$scope‘, ‘Upload‘, function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.submit = function() {
      if (form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // upload on file select or drop
    $scope.upload = function (file) {
        Upload.upload({
            url: ‘upload/url‘,
            data: {file: file, ‘username‘: $scope.username}
        }).then(function (resp) {
            console.log(‘Success ‘ + resp.config.data.file.name + ‘uploaded. Response: ‘ + resp.data);
        }, function (resp) {
            console.log(‘Error status: ‘ + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log(‘progress: ‘ + progressPercentage + ‘% ‘ + evt.config.data.file.name);
        });
    };
    // for multiple files:
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);
时间: 2024-11-02 23:22:00

ng-file-upload - samples的相关文章

jQuery File Upload文件上传插件使用

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端.官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法: 1

File upload error - unable to create a temporary file

php上传图片的时候会报错: File upload error - unable to create a temporary file 文件上传错误 - 无法创建一个临时文件 你只需要打开你的php.ini文件,设置upload_tmp_dir="f:\temp"  然后重启环境就可以了,如果还不行就去看看文件夹的权限是否有权限,赋予写入权限就好了

jquery file upload 文件上传插件

1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jquery file upload 下载 地址:https://github.com/blueimp/jQuery-File-Upload/tags jquery file upload API 地址:https://github.com/blueimp/jQuery-File-Upload/wiki

jQuery File Upload

jQuery File Upload 需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址

记一次jquery file upload的断点续传的问题的纠结历程

相关参考:http://www.cnblogs.com/ASPNET2008/p/3360427.html 开始打算做断点续传的时候直接拷贝的这一串代码,放到我的项目里面之后Request.Files中的Filename获取到的一直是"blob", 然后我就拖啊拖了很久,后来打算放弃掉不做了,昨天测试Jquer File Upload这个上传组件的时候发现超过2G的文件死都传不上去! 1 <system.web> 2 <httpRuntime maxRequestLe

Form-based File Upload in HTML(RFC-1867)

1. RootViewController.m #import "RootViewController.h" #define URL @"http://localhost:8080/TestOne/upload3.jsp" @implementation RootViewController - (void)viewDidLoad { [super viewDidLoad]; UIButton *button = [UIButton buttonWithType:U

jQuery File Upload 单页面多实例的实现

jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示.插件基于开放的标准,如 HTML5 和 JavaScript ,不需要额外的浏览器插件(例如使用Adobe 的 Flash ),在旧版浏览器中使用 XMLHttpRequest

jquery File upload使用总结

1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jquery file upload 下载   地址:https://github.com/blueimp/jQuery-File-Upload/tags jquery file upload API    地址:https://github.com/blueimp/jQuery-File-Upload

Django html file upload 上传图片

html file upload 上传图片     第一步: 这是一个上传图片的按钮 <form class="form-horizontal" method="post" action="{% url 'create_article' %}" enctype="multipart/form-data"> {% csrf_token %}   <div class="form-group"

jQuery File Upload 图片上传解决方案兼容IE6+

1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ====================== 3.修改basic.html 如下: 1.cdn 静态引用修改 2.ajax提交路径修改 ====&&& 其他demo页面修改同理 =======: 下面修改完了以后.如下所示: <!DOCTYPE HTML><!--/* * jQuery File Up