我是棱角分明的新手.我想用这个上传文件.我使用以下链接
http://jsfiddle.net/jasonals/WEvwz/27/?upload.html
controlller file. $(document).ready(function(){ $('#fileupload').fileupload({ dataType: 'json'}); }); TestCtrl = function($scope){ $scope.fileList = []; $('#fileupload').bind('fileuploadadd', function(e, data){ // Add the files to the list numFiles = $scope.fileList.length for (var i=0; i < data.files.length; ++i) { var file = data.files[i]; // .$apply to update angular when something else makes changes $scope.$apply( $scope.fileList.push({name: file.name}) ); } // Begin upload immediately data.submit(); }); $scope.addButtonClicked = function(){ var numFiles = $scope.fileList.length; $scope.fileList.push({name: ('fileName' + numFiles)}); } }
- {{file.name}}
但我无法使用此发布网址.
我不能直接回答你的问题,除了说:确保你data-url
在JSFiddle的例子中输入你的输入.
作为替代方案,我建议使用我成功使用的angular-file-upload.它使用角度指令来完成上传.这种模式使用了更多的代码,但是将应用程序中的问题分开,这样Controller就可以将事物粘合在一起,并且您的服务实际上与外部世界进行对话.
这将使您的应用程序更容易测试:
<div ng-controller="FileUploadController"> <h3>Upload a file</h3> <input type="file" ng-file-select="uploadFile($files)" /> </div>
和javascript:
// define the app, include the file upload dependency var app = angular.module('MyApp', ['ng', 'angularFileUpload']); // controller to handle the file upload event app.controller('FileUploadController', function ($scope, $rootScope, FileUploadService) { var service = FileUploadService; /** * Handler to upload a new file to the server. */ $scope.uploadFile = function ($files) { var $file = $files[0]; service.uploadFile($file, function (error) { if (error) { alert('There was a problem uploading the file.'); } // handle successfully-uploaded file }) } }); // services should interact with the outside world app.factory('FileUploadService', function ($http) { var api = { uploadFile: function (file, callback) { $http.uploadFile({ url: '/some/remote/end/point/', file: file }).progress(function(event) { console.log('percent: ' + parseInt(100.0 * event.loaded / event.total)); }).error(function (data, status, headers, config) { console.error('Error uploading file') callback(status); }).then(function(data, status, headers, config) { callback(null); }); } } return api; });