ng-file-upload

ajax上传文件

官方demo地址

安装

bower install ng-file-upload-shim --save(for non html5 suppport)

bower install ng-file-upload --save

使用实例

<script src="angular(.min).js"></script>

<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->

<script src="ng-file-upload(.min).js"></script>

<body ng-app="fileUpload" ng-controller="MyCtrl">

  <h4>Upload on file select</h4>

  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"

          accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">

      Select File</button>

  <br><br>

  File:

  <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}

      <span class="progress" ng-show="f.progress >= 0">

          <div style="width:{{f.progress}}%"

               ng-bind="f.progress + '%'"></div>

      </span>

  </div>

  {{errorMsg}}

</body>


//inject angular file upload directives and services.

var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {

    $scope.uploadFiles = function(file, errFiles) {

        $scope.f = file;

        $scope.errFile = errFiles && errFiles[0];

        if (file) {

            file.upload = Upload.upload({

                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',

                data: {file: file}

            });

            file.upload.then(function (response) {

                $timeout(function () {

                    file.result = response.data;

                });

            }, function (response) {

                if (response.status > 0)

                    $scope.errorMsg = response.status + ': ' + response.data;

            }, function (evt) {

                file.progress = Math.min(100, parseInt(100.0 *

                                         evt.loaded / evt.total));

            });

        }

    }

}]);


.thumb {

    width: 24px;

    height: 24px;

    float: none;

    position: relative;

    top: 7px;

}

form .progress {

    line-height: 15px;

}

.progress {

    display: inline-block;

    width: 100px;

    border: 3px groove #CCC;

}

.progress div {

    font-size: smaller;

    background: orange;

    width: 0;

}

angularjs图片上传和预览 - ng-file-upload的更多相关文章

  1. angularjs图片上传和预览 base64

    angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  4. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  5. DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）

        1.控件功能     列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例       2.1 ASPxImage                http: ...

  6. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  7. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  8. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

随机推荐

  1. 步步为营-54-DOM

    说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理 1.1 使用JavaScript操作DOM,主要包括两个部分 Browser对象:BO ...

  2. Myeclipse启动不了的解决方法

    Myeclipse启动不了的解决方法    我们在开发过程中经常在加载大工程时由于项目很大,导致编译时间很长.或是其他原因导致进度条有时候一直在不停地跑,占用了大量内存,在无奈之下直接将进程kill掉 ...

  3. MyEclipse10中启动出现OutOfMemoryError: PermGen space如何解决

    一篇关于技术的文档,分享给大家.在MyEclipse中启动程序运行,报错java.lang.OutOfMemoryError: PermGen space应该怎么办?这是eclipse 内存不够的原因 ...

  4. VS2013 生成时复制文件或目录到指定目录

    需求: 在vs2010生成成功时将项目Lib目录下Reader文件夹内的所有文件和文件夹复制到输出目录(Debug或Release目录) 方法: 打开VS2010,右键项目属性-生成事件-后期生成事件 ...

  5. Json的简单使用

    1>:推荐JSON学习的网址:http://www.w3school.com.cn/json/index.asp 2>:JSON: JavaScript 对象表示法(JavaScript ...

  6. spoj694

    题意:求不相同的子串个数 题解: 考虑一下后缀数组 yy一下就能发现答案就是n*(n+1)/2-sigma(i=1;i<=n;i++)height[i] 代码:

  7. BZOJ1073 [SCOI2007]kshort K短路,A*

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1073 题意概括 以距离为第一关键字,字典序为第二关键字,在所有的从S到T的路径中,选择不重复经过某 ...

  8. python中使用XPath笔记

    XPath在Python的爬虫学习中,起着举足轻重的地位,对比正则表达式 re两者可以完成同样的工作,实现的功能也差不多,但XPath明显比re具有优势,在网页分析上使re退居二线. XPath介绍: ...

  9. iOS 11开发教程（二十一）iOS11应用视图美化按钮之实现按钮的响应(1)

    iOS 11开发教程(二十一)iOS11应用视图美化按钮之实现按钮的响应(1) 按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应 ...

  10. C# EF 与 MySql 的那些坑

    之前一直想用 mysql 和 ef .然后多次尝试也只能感叹 还是 sqlsever 是亲儿子. 今天在单位又尝试了一次,然后就成功了,记录一下遇到的问题. 首先是安装包和驱动?. 请保证 MySql ...