2012-10-22 17 views
10

Obecnie używam socket.io, aby przesłać wideo z paskiem postępu. Oto poradnikJak przesłać duży plik w Ekspresie z paskiem postępu?

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade-in-node-js/

ale Internet Explorer nie obsługuje tej metody, ale naprawdę muszę przesłać film we wszystkich przeglądarkach.

Sprawdziłem ekspresową dokumentację. Ponieważ express jest oparty na node-formidable (który ma zdarzenie progress), myślę, że jest sposób na zbudowanie systemu przesyłania z paskiem postępu, prawda? Po prostu nie wiem jak!

Czy włącza się IE z obsługą węzłów?

W jaki sposób można zbudować system przesyłania plików w czystym espress.js z paskiem postępu?

Odpowiedz

1

Można to zrobić za pomocą zdarzenia postępu xhr.upload. Jest obsługiwany z html5.

Na przykład: https://github.com/zeMirco/express-upload-progress

w PHP przesłać informacje mogą być dołączone do sesji, a więc współpracuje z HTML4, może jest nodejs rozszerzenie dla że zbyt, ja to google.

Zgodnie z tym: How to do upload with express in node.js jest wydarzeniem postęp w Express przesyłania plików, dzięki czemu można ustawić zmienną w sesji z rzeczywistych danych postępy i odczytać go z AJAX od strony klienta.

1

Oto dyrektywa jsfiddle przy użyciu dyrektyw kątowych i ng-file-upload.

Jsfiddle działa na obrazy i pliki, ale aby przesłać filmy, należy zmienić adres URL POST na serwer.

//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)); 
 
     }); 
 
    } 
 
    } 
 
}]);
.thumb { 
 
    width: 24px; 
 
    height: 24px; 
 
    float: none; 
 
    position: relative; 
 
    top: 7px; 
 
} 
 

 
form .progress { 
 
    line-height: 15px; 
 
} 
 

 
.progress { 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 3px groove #CCC; 
 
} 
 

 
.progress div { 
 
    font-size: smaller; 
 
    background: orange; 
 
    width: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script> 
 

 

 
<body ng-app="fileUpload" ng-controller="MyCtrl"> 
 
    <h4>Upload on file select</h4> 
 
    <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" ngf-max-height="1000" ngf-max-size="100MB"> 
 
    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>