angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)

AngularJS - 上传文件( Upload File)

我们提供了上传文件的示例。为了开发这个应用程序，我们使用了HTML，CSS和AngularJS。以下示例显示了如何使用AngularJS上载文件。

upload me

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', ['$https:', function ($https:) {

this.uploadFileToUrl = function(file, uploadUrl) {

var fd = new FormData();

fd.append('file', file);

$https:.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);

};

}]);

结果 (Result)

在Web浏览器中打开上面保存的代码文件。看到结果。

新页面打开

AngularJS - 登录应用程序( Login Application)

angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)相关推荐

移动端上传大文件到服务器,android上传大文件到服务器地址
android上传大文件到服务器地址内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器 ...
上传文件到服务器地址怎么配置,文件上传到服务器怎么配置
文件上传到服务器怎么配置内容精选换一换模型准备以昇腾模型压缩工具的安装用户将需要量化的TensorFlow模型上传到Linux服务器任意目录下.本章节以sample自带的yolov3/pre_m ...
jq上传本地文件到服务器,jq实现前端文件上传
formdata formdata是xmlhttprequest level 2 新增的一个接口. 使用formdata可以实现各种文件上传. 使用 // 创建formdata的实例 var form ...
Git上传本地文件到服务器,git上传文件到远程服务器
git上传文件到远程服务器内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
http文件上传到web服务器，上传到ftp服务器
前期准备: ftp:服务器的配置.(为ftp上传使用). 注意: 1.要是你测试用,ftp就在你自己开发的机器上配置,一定别忘了要先创建用户.且该用户一定要有可读写的权限!要不然会出现ftp 530错 ...
上传文件到服务器指令,上传文件到远程服务器的命令
上传文件到远程服务器的命令内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
怎么上传ftp服务器文件,ftp服务器如何上传本地文件
ftp服务器如何上传本地文件内容精选换一换在本地主机和Windows弹性云服务器上分别安装QQ.exe等工具进行数据传输.使用远程桌面连接mstsc方式进行数据传输.该方式不支持断点续传,可能存 ...
文件无法上传到ftp服务器,无法上传文件到FTP服务器使用C++
我有这个简单的代码上传文件到服务器,但它似乎不工作,不上传任何文件(FtpPutFile返回0).我正在使用FileZilla服务器,这是我的代码和FileZilla所说的:无法上传文件到FTP服务器 ...
个人上传文件进服务器,个人上传文件进服务器
个人上传文件进服务器内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...

angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)

angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)相关推荐

最新文章

热门文章