一个简单的上传使用AngularJs（CORS与实施） [英] A Simple Uploader using AngularJs (with CORS Implementation)

问题描述

最近，我不得不写使用AngularJs一个简单的上传（可重复使用），同时，让我的API在不同的地方，最后使用的 blueimp jQuery的文件上传并做律定制它。我想这可能是巨大的，这种分享，并希望提高自己在学习AngularJs。 （我已经添加了答案）

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：//$c$clikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html
（您也可以下载整个code的）

http://codelikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html (You can download the entire code their)

App.Coffee

App.Coffee

@angTut = angular.module("angTut", ['LocalStorageModule', 'ngResource', 'uploaderComponent']);

@angTut.constant('uploadServiceUrl', 'http://192.168.0.2/api/index.php')

todos_uploader_controller.coffee

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

uploader.directive

https://gist.github.com/sk8terboi87/5652187

upload.html

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与实施）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！