AngularJs 上传文件到服务器

最新推荐文章于 2024-08-24 08:28:00 发布

追梦的搬运工

最新推荐文章于 2024-08-24 08:28:00 发布

阅读量2.3k

点赞数

分类专栏：笔记心得文章标签： angularjs 服务器

本文链接：https://blog.csdn.net/yanchangyufan/article/details/56292411

版权

心得同时被 2 个专栏收录

47 篇文章

订阅专栏

笔记

22 篇文章

订阅专栏

本文介绍了如何在AngularJs项目中利用ng-file-upload插件进行文件上传。首先从GitHub下载该插件，并在项目中引入。接着展示了一个`ngf-select`指令的示例，用于选择文件并调用`uploadAPFiles`方法。此方法包含错误处理和文件上传逻辑，使用Upload.upload发送文件到指定URL。在上传过程中，可以显示进度信息，并在成功或失败时提供反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在项目中需要运用到AngularJs，其中用到AngularJs中上传文件功能，借此，记录下，怎样运用AngularJs中的组件。首先，去下载一个叫ng-file-upload的插件。下载地址：https://github.com/danialfarid/ng-file-upload 上面也关于怎样运用这个插件的。该插件需要自己在项目中定义到具体路径

define([

'angular',
'angular-route',
'angular-resource',
'angular-animate',
'angular-growl',
'angular-ngupload',
'controllers/index',
'directives/index',
'filters/index',

'services/index'

然后，代码中<button type="file"
ngf-select="uploadAPFiles($file, $invalidFiles)"
ngf-max-height="1000" ngf-max-size="150MB" ngf-pattern="'.bin'">
选择程序包并上传</button>

上面代码中，主要是AngularJs中基础运用，通过uploadAPFiles方法，该方法在js文件中定义。

说说几个参数的意思，ngf-max-size表示限制上传的大小，ngf-pattern表示允许上传哪些文件，限制作用。JS文件中定义的方法，具体实现上传代码。下面：

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

$scope.errFile = errFiles
&& errFiles[0];
if ($scope.errFile != undefined) {

BootstrapDialog
.show({
title : '通知消息',
message : '请选择合法的文件类型!'
});

}
if (file) {
file.upload = Upload.upload({
url : upload_url,
data : {
file : file
}
});

file.upload
.then(
function(
response) {
console
.log('Success '
+ response.config.data.file.name
+ 'uploaded. Response: '
+ response.data);
BootstrapDialog
.show({
title : '通知消息',
message : '上传AP程序成功'
});
$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));
if (file.progress == 100) {

}
});
}
}