2012-10-22 14 views
10

Şu anda videosu ilerleme çubuğu ile yüklemek için socket.io kullanıyorum. İşte öğreticiBüyük dosyayı ilerleme çubuğuna nasıl gönderilir?

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

ama Internet Explorer bu yöntemi desteklemiyor, ama gerçekten tüm tarayıcılarda video yükleyebilir gerekir.

Açık belgeleri kontrol ettim. Ekspres node-formidable (bir ilerleme durumu olan) dayalı olduğundan, ilerleme çubuğu ile bir yükleme sistemi inşa etmenin bir yolu olduğunu düşünüyorum, değil mi? Sadece nasıl olduğunu bilmiyorum!

Düğüm zorlu IE etkin mi?

Saf espress.js'de ilerleme çubuğu ile dosya yükleme sistemi kurmak mümkün mü?

cevap

1

xhr.upload progress olayıyla yapılabilir. Html5'ten desteklenmektedir. Örneğin

: https://github.com/zeMirco/express-upload-progress

o HTML4 ile çalışır, böylece yükleme bilgileri, oturuma eklenebilir php, belki de bunu google edeceğiz bunun için de bir nodejs uzantısı vardır. Buna göre

: How to do upload with express in node.js orada Dosya yükleme yoluyla express bir ilerleme olay, yani gerçek ilerleme verilerle oturumda bir değişken ayarlayın ve istemci tarafında gelen ajax ile okuyabilir.

1

Köşeli js ve ng-file-upload yönergesini kullanarak jsfiddle buradadır.

jsfiddle, resimler ve dosyalar için çalışır, ancak POST URL'sini değiştirdiğiniz videoları sunucunuza yükler.

//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>