Загрузить файл Угловой

У меня есть простая формаЗагрузить файл Угловой

<div ng-controller='MyCtrl'> 
<form ng-submit='submit()'> 
    <input name="name" value="name"> 
    <lf-ng-md-file-input lf-files='files'> </lf-ng-md-file-input> 
    <button type='submit'> Submit 
</form> 
</div>

Я использую этот HTML элемент для выбора файла на стороне клиента: https://github.com/shuyu/angular-material-fileinput.

Как я могу получить доступ к моему файлу загрузки, чтобы отправить его на сервер?

источник

2016-02-08 Bob

Я бы рекомендовал использовать Ng-File-upload будет делать трюк вы можете сделать что-то вроде этого, есть больше документации на сайте, а также скрипку для различных примеров

<body ng-app="fileUpload" ng-controller="MyCtrl"> 
<h4>Upload on file select</h4> 
    <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" 
     accept="image/*" ngf-max-height="1000" ngf-max-size="1MB"> 
    Select File</button> 
    <br><br> 
    File: 
    <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}} 
    <span class="progress" ng-show="f.progress >= 0"> 
     <div style="width:{{f.progress}}%" 
      ng-bind="f.progress + '%'"></div> 
    </span> 
</div>  
    {{errorMsg}} 
</body>

Контроллер:

//inject angular file upload directives and services. 
var app = angular.module('fileUpload', ['ngFileUpload']); 

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
    $scope.uploadFiles = function(file, errFiles) { 
    $scope.f = file; 
    $scope.errFile = errFiles && errFiles[0]; 
    if (file) { 
     file.upload = Upload.upload({ 
      url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
      data: {file: file} 
     }); 

     file.upload.then(function (response) { 
      $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)); 
     }); 
    } 
    } 
}]);

источник

2016-02-08 14:55:21

Привет, извините, я явно не проиллюстрировал вход lf-ng-md-file.

Эта угловая директива фокусируется на том, чтобы материал выглядел и загружал файловую базу на ajax.

Итак, самое главное, вам нужно извлечь файлы самостоятельно из привязки данных «lf-files», а не от входного элемента, потому что он очищается каждый раз после файла разрешения.

Данные «lf-files» представляют собой переменную массива, объект в массиве содержит свойства с lfFileName (имя файла), lfFile (файл-объект) и lfDataUrl (для предварительного просмотра) из файла ввода разрешения.

Вы можете наблюдать "lf-файлы", используя $ watch.

HTML:

<lf-ng-md-file-input lf-files='files' multiple> </lf-ng-md-file-input>

JavaScript:

app.controller('MyCtrl',function($scope){ 
    $scope.$watch('files.length',function(newVal,oldVal){ 
     console.log($scope.files); 
    }); 
});

Таким образом, после завершения выбора файлов нужно настроить данные, как показано ниже, чтобы соответствовать вашей стороне сервера.

JavaScript:

app.controller('MyCtrl',function($scope){ 

    ... 

    $scope.onSubmit = function(){ 
     var formData = new FormData(); 
     angular.forEach($scope.files,function(obj){ 
      formData.append('files[]', obj.lfFile); 
     }); 
     $http.post('./upload', formData, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }).then(function(result){ 
      // do sometingh     
     },function(err){ 
      // do sometingh 
     }); 
    }; 

    ... 

});

В моем случае я использовать Node.js (экспресс + превосходно) на стороне сервера, «Грозная» представляет собой модуль узла для синтаксического анализа данных формы, то есть другие аналогичные, как «Multer» ,

Сервер:

var express = require('express'); 
var formidable = require('formidable'); 
var app = express(); 
app.use(express.static(__dirname + '/public')); 

... 

app.post('/upload',function(req,res){ 
    var form = new formidable.IncomingForm(); 
    form.uploadDir = __dirname +'/public/uploads'; 
    //file upload path 
    form.parse(req, function(err, fields, files) { 
     //you can get fields here 
    }); 
    form.on ('fileBegin', function(name, file){ 
     file.path = form.uploadDir + "/" + file.name; 
     //modify file path 
    }); 
    form.on ('end', function(){ 
     res.sendStatus(200); 
     //when finish all process  
    }); 
}); 

...

Я надеюсь, что это поможет.

источник

2016-03-23 03:27:58 shuyu

Uncaught TypeError: Невозможно прочитать файлы свойств неопределенных - это видно на консоли для перетаскивания. SSR

Привет ~ Я думаю, мне нужно больше деталей об исходном коде, возможно, вы можете задать в github – shuyu

Эй. Я исправил и создал PR. :) – SSR

Загрузить файл Угловой

ответ

Смежные вопросы