Làm thế nào để tải lên tập tin lớn trong thể hiện với thanh tiến trình?

Hiện tại tôi đang sử dụng socket.io để tải video lên bằng thanh tiến trình. Dưới đây là hướng dẫnLàm thế nào để tải lên tập tin lớn trong thể hiện với thanh tiến trình?

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

nhưng Internet Explorer không hỗ trợ phương pháp này, nhưng tôi thực sự cần phải tải lên các video trong tất cả các trình duyệt.

Tôi đã kiểm tra tài liệu nhanh. Vì express được dựa trên node-formidable (trong đó có một sự kiện tiến bộ), tôi nghĩ rằng có cách để xây dựng một hệ thống tải lên với thanh tiến trình, phải không? Tôi chỉ không biết làm thế nào!

IE có thể kích hoạt nút phải không?

Có cách nào để xây dựng hệ thống tải lên tệp trong espress.js tinh khiết với thanh tiến trình?

Nguồn

2012-10-22 paynestrike

Có thể thực hiện với sự kiện tiến trình xhr.upload. Nó được hỗ trợ từ html5.

Ví dụ: https://github.com/zeMirco/express-upload-progress

Trong php thông tin tải lên có thể được gắn vào phiên giao dịch, vì vậy nó hoạt động với HTML4, có lẽ đó là một phần mở rộng nodejs cho rằng quá, tôi sẽ google nó.

Theo điều này: How to do upload with express in node.js có sự kiện tiến triển bằng cách tải lên tệp, vì vậy bạn có thể đặt biến trong phiên với dữ liệu tiến độ thực tế và đọc nó với ajax từ phía máy khách.

Nguồn

2013-02-20 09:51:27 inf3rno

Dưới đây là jsfiddle sử dụng js góc và ng-file-upload chỉ thị.

Công cụ jsfiddle hoạt động cho hình ảnh và tệp nhưng để tải video lên, bạn sẽ thay đổi URL POST thành máy chủ của mình.

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

Nguồn

2016-06-03 20:17:26 harshgupta

Làm thế nào để tải lên tập tin lớn trong thể hiện với thanh tiến trình?

Trả lời

Các vấn đề liên quan