How to upload large file in express with progress bar?
Question
Currently I am using socket.io to upload the video with progress bar. Here is the tutorial
but Internet Explorer does not support this method, but I really need upload the video in all browsers.
I checked the express documentation. Since express is based on node-formidable (which has a progress event), I think there is way to build a upload system with progress bar, right? I just don't know how!
Is node-formidable IE enabled right?
Any way is it possible to build a file upload system in pure espress.js with progress bar?
2 answers
solution1
1 2013-02-20 09:51:27
It can be done with the xhr.upload progress event. It is supported from html5.
For example: https://github.com/zeMirco/express-upload-progress
In php the upload information can be attached to the session, so it works with html4, maybe there is a nodejs extension for that too, I'll google it.
According to this: How to do upload with express in node.js there is a progress event in express by file upload, so you can set a variable in the session with the actual progress data, and read it with ajax from client side.
solution2
1 2016-06-03 20:17:26
Here is the jsfiddle using angular js and ng-file-upload directive.
The jsfiddle works for images and files but to upload the videos you will have change the POST url to your server.
//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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.