网上可以找到的 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应该是可加可不加,但实测-shim.min.js必须包含,否则有js文件加载问题。但是angular-file-upload-shim.min.js这个文件在github上不存在!!!
所以用ng-file-upload!用ng-file-upload!用ng-file-upload!
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。
特性
支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS, PUT(html5)/POST 方法
支持使用 Flash polyfill FileAPI 跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。
当文件的内容类型使用 $upload.http()时,支持直接上传到 CouchDB,imgur 等等。支持 Angular http POST/PUT 请求的进度事件
轻量级,使用常规的 $http 来上传(支持非 HTML5 浏览器),所以提供所有 Angular $http 功能
例子
<!DOCTYPE html> <html ng-app="app"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>文件上传</title> <meta charset="utf-8"/> <script src="JS/angular.min.js"></script> <script src="JS/ng-file-upload.min.js"></script> <script src="JS/ng-file-upload-shim.min.js"></script> <script> var app = angular.module('app', ['ngFileUpload']); app.controller('FileController', function ($scope, Upload) { $scope.uploadImg = ''; //提交 $scope.submit = function () { $scope.upload($scope.file); }; $scope.upload = function (file) { $scope.fileInfo = file; Upload.upload({ //服务端接收 url: 'Ashx/UploadFile.ashx', //上传的同时带的参数 data: {'username': $scope.username}, //上传的文件 file: file }).progress(function (evt) { //进度条 var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); console.log('progess:' + progressPercentage + '%' + evt.config.file.name); }).success(function (data, status, headers, config) { //上传成功 console.log('file ' + config.file.name + 'uploaded. Response: ' + data); $scope.uploadImg = data; }).error(function (data, status, headers, config) { //上传失败 console.log('error status: ' + status); }); }; }); </script> </head> <body> <form ng-controller="FileController"> <img src="{{uploadImg}}"/> 当前上传用户:<input type="text" placeholder="请输入您的名称" name="name" ng-model="username"/> <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div> <button type="submit" ng-click="submit()">submit</button> {{fileInfo.name}}<br/> {{fileInfo.size}} </form> </body> </html>
这是前端页面,后端如果用Java的话可以用commons-fileupload等文件上传类库。
注意
如果后端使用了Struts等框架,框架的过滤器会自动处理http请求中的上传的文件部分,造成在Servlet中获取不到请求的文件数据。
解决方法一是更改Struts配置文件,将文件上传的过滤器改为我们自己编写的空白过滤器
解决方法二是像submit一个带有<input type="file">的form表单一样,让Struts自动获取到上传的文件。只需要在Servlet中添加一个File类型的属性,并加入get/set方法。属性的名字一定要是file!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
我们提供了上传文件的示例。 为了开发这个应用程序,我们使用了HTML,CSS和AngularJS。 以下示例显示了如何使用AngularJS上载文件。 <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script
本文向大家介绍jQuery File Upload文件上传插件使用详解,包括了jQuery File Upload文件上传插件使用详解的使用技巧和注意事项,需要的朋友参考一下 jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 官网链接:https://gith
ng-file-upload由轻量级AngularJS文件上传指令构成。 特征 文件上传/取消程序 文件拖放(仅html5) 剪贴板中的图片复制和浏览器界面的拖放(仅html5) 用户通过使用ngImgCrop进行图片尺寸改变和中间裁剪(本地)(仅html5) 定向修复有关Exif定向数据的JPEG图像文件 断点上传:暂停/继续上传(仅html5) 本地验证支持:文件类型/大小,图像宽度/盖度/透
本文向大家介绍jquery-file-upload 文件上传带进度条效果,包括了jquery-file-upload 文件上传带进度条效果的使用技巧和注意事项,需要的朋友参考一下 jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 效果图如下所示: html 部分
本文向大家介绍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'
ASP.NET有两个控件,允许用户将文件上传到Web服务器。 一旦服务器收到发布的文件数据,应用程序就可以保存,检查或忽略它。 以下控件允许上传文件: HtmlInputFile - 一个HTML服务器控件 FileUpload - 和ASP.NET Web控件 这两个控件都允许文件上载,但FileUpload控件自动设置表单的编码,而HtmlInputFile不会这样做。 在本教程中,我们使用F