angularjs文件上传

参考: http://jsfiddle.net/JeJenny/ZG9re/

<div ng-controller = "myCtrl">

<input type="file" file-model="myFile"/>

<button ng-click="uploadFile()">upload me</button>

</div>

var myApp = angular.module(‘myApp‘, []);

myApp.directive(‘fileModel‘, [‘$parse‘, function ($parse) {

return {

restrict: ‘A‘,

link: function(scope, element, attrs) {

var model = $parse(attrs.fileModel);

var modelSetter = model.assign;

element.bind(‘change‘, function(){

scope.$apply(function(){

modelSetter(scope, element[0].files[0]);

});

});

}

};

}]);

myApp.service(‘fileUpload‘, [‘$http‘, function ($http) {

this.uploadFileToUrl = function(file, uploadUrl){

var fd = new FormData();

fd.append(‘file‘, file);

$http.post(uploadUrl, fd, {

transformRequest: angular.identity,

headers: {‘Content-Type‘: undefined}

})

.success(function(){

})

.error(function(){

});

}

}]);

myApp.controller(‘myCtrl‘, [‘$scope‘, ‘fileUpload‘, function($scope, fileUpload){

$scope.uploadFile = function(){

var file = $scope.myFile;

console.log(‘file is ‘ );

console.dir(file);

var uploadUrl = "/fileUpload";

fileUpload.uploadFileToUrl(file, uploadUrl);

};

}]);

时间: 2024-07-29 00:20:11

angularjs文件上传的相关文章

AngularJS 文件上传控件 ng-file-upload

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

webAPI+angularJS文件上传和下载

开发框架 前端 angularJS1.6 下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/ 后端 .net WebAPI 1 导入Excel文件关键代码 1.1 导入Excel弹出框 1.2 模态框html代码 <div class="modal fade" id="importExcelPop" tabindex="-1" role="dialog" a

[Angularjs]ng-file-upload上传文件

写在前面 最近在弄文档库的H5版,就查找了下相关的上传组件,发现了ng-upload的东东,推荐给大家. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angularjs]视图和路由(三) [Angularjs]视图和路由(四) [Angularjs]ng-class,ng-class-even,ng-class-odd [Angul

AngularJs附件上传下载

首先:angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传. 第一步:引用angularjs的脚本:ng-file-upload-shim.min.js 和 ng-file-upload.min.js 第二步:在angularjs的controller中注入:ngFileUpload 例如:angular.module('liaoyuan.controllers',

用angularjs进行文件上传

文件上传页面三要素: 1.  form表单提交方式一定是post 2.  form表单的enctype一定是multipart/form-data 3.  form表单中一定要有一个input的type是 file 文件上传一定要有的jar Commons-io和commons-fileupload Springmvc文件上传: 1.  springmvc.xml中一定要有 多媒体解析器 <bean id="multipartResolver" class="org.s

[sharepoint]rest api文档库文件上传,下载,拷贝,剪切,删除文件,创建文件夹,修改文件夹属性,删除文件夹,获取文档列表

写在前面 最近对文档库的知识点进行了整理,也就有了这篇文章,当时查找这些接口,并用在实践中,确实废了一些功夫,也为了让更多的人走更少的弯路. 系列文章 sharepoint环境安装过程中几点需要注意的地方 Rest API的简单应用 rest api方式实现对文档库的管理 通过WebClient模拟post上传文件到服务器 WebHttpRequest在sharepoint文档库中的使用 [sharepoint]Rest api相关知识(转) [sharepoint]根据用户名获取该用户的权限

简单利用filetype进行文件上传

对于文件上传大家都很熟悉了,毕竟文件上传是获取webshell的一个重要方式之一,理论性的东西参考我的另一篇汇总文章<浅谈文件解析及上传漏洞>,这里主要是实战补充一下理论内容--filetype漏洞! filetype漏洞主要是针对content-type字段,主要有两种利用方式:    1.先上传一个图片,然后将content-type:image/jpeg改为content-type:text/asp,然后对filename进行00截断,将图片内容替换为一句话木马. 2.直接使用burp抓

jquery-ajax实现文件上传异常处理web.multipart.MultipartException

异常如下: org.springframework.web.multipart.MultipartException: The current request is not a multipart request 原因分析: 可能原因1: form表单中没有添加 enctype="multipart/form-data" 属性 可能原因2: 请求方式必须为post,如果不是则必定出错 可能原因3: 请求的contentType不是"multipart/form-data&qu

SpringMVC中文件上传的客户端验证

SpringMVC中文件上传的客户端验证 客户端验证主要思想:在jsp页面中利用javascript进行对文件的判断,完成验证后允许上传 验证步骤:1.文件名称 2.获取文件的后缀名称 3.判断哪些文件类型允许上传 4.判断文件大小 5.满足条件后跳转后台实现上传 前台界面(验证上传文件是否格式满足要求): <body> <h2>文件上传</h2> <form action="upload01" method="post"