本文介绍了使用 AngularJs 的简单上传器(带有 CORS 实现)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近，我不得不使用 AngularJs 编写一个简单的上传器(可重用)，同时将我的 API 放在单独的地方，最后使用 blueimp jQuery File Uploader 并对其进行了自定义.我认为分享这个可能很棒，并希望在 AngularJs 学习中提高自己.(我已经添加了答案)
解决方案
http://codelikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html(你可以下载他们的完整代码)
App.Coffee
@angTut = angular.module("angTut", ['LocalStorageModule', 'ngResource', 'uploaderComponent']);@angTut.constant('uploadServiceUrl', 'http://192.168.0.2/api/index.php')
todos_uploader_controller.coffee
使用严格"@angTut.controller('TodosUploadController', ($scope, 上传服务) ->$scope.uploadLayer = (e, data, process) ->$scope.uploadReturn = uploadService.process(e, data, process)$scope.uploadReturn = uploadService.initialize())
uploader.directive
https://gist.github.com/sk8terboi87/5652187
上传.html
<input id="testUpload" type="file" fileupload name="files[]" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')"><div class="well" ng-show="uploadReturn.status">{{uploadReturn.message}}<div ng-show="!uploadReturn.error"><p class="label label-info">文件:{{uploadReturn.successData.name}}</p><p><a href="{{uploadReturn.successData.fullUrl}}" target="_blank">查看文件</a></p>
Recently, I had to write a simple uploader (reusable) using AngularJs, while, keeping my API in separate place and finally wrote one using blueimp jQuery File Uploader and made lil customizing it. I Thought it might be great to share this and hopefully improve myself in learning in AngularJs. (I've added the answer)
解决方案
http://codelikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html(You can download the entire code their)
App.Coffee
@angTut = angular.module("angTut", ['LocalStorageModule', 'ngResource', 'uploaderComponent']);
@angTut.constant('uploadServiceUrl', 'http://192.168.0.2/api/index.php')
todos_uploader_controller.coffee
"use strict"
@angTut.controller('TodosUploadController', (
$scope, uploadService
) ->
$scope.uploadLayer = (e, data, process) ->
$scope.uploadReturn = uploadService.process(e, data, process)
$scope.uploadReturn = uploadService.initialize()
)
uploader.directive
https://gist.github.com/sk8terboi87/5652187
upload.html
<div class="control-group">
<input id="testUpload" type="file" fileupload name="files[]" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')">
<div class="well" ng-show="uploadReturn.status">
{{uploadReturn.message}}
<div ng-show="!uploadReturn.error">
<p class="label label-info">File: {{uploadReturn.successData.name}}</p>
<p><a href="{{uploadReturn.successData.fullUrl}}" target="_blank">View file</a></p>
</div>
</div>
</div>
这篇关于使用 AngularJs 的简单上传器(带有 CORS 实现)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
