如何使用进度条快速上传大文件？
Posted
技术标签:
【中文标题】如何使用进度条快速上传大文件？【英文标题】：How to upload large file in express with progress bar? 【发布时间】：2012-10-12 01:46:31 【问题描述】：目前我正在使用socket.io 上传带有进度条的视频。这是教程
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-resumable-video-uploade-in-node-js/
但是 Internet Explorer 不支持这种方法，但我确实需要在所有浏览器中上传视频。
我检查了快递文件。由于 express 是基于node-formidable （它有一个进度事件），我认为有办法建立一个带有进度条的上传系统，对吧？我就是不知道怎么做！
node-formidable IE 启用了吗？
有没有办法用纯espress.js构建一个带进度条的文件上传系统？
【问题讨论】：
【参考方案1】：可以通过 xhr.upload 进度事件来完成。从 html5 开始支持。
例如： https://github.com/zeMirco/express-upload-progress
在php中可以将上传信息附加到会话中，因此它可以与html4一起使用，也许也有一个nodejs扩展，我会谷歌它。
据此： How to do upload with express in node.js 通过文件上传快递有一个进度事件，因此您可以在会话中使用实际进度数据设置一个变量，并从客户端使用ajax读取它。
【讨论】：
【参考方案2】：这是使用 Angular js 和 ng-file-upload 指令的 jsfiddle。
jsfiddle 适用于图像和文件，但要上传视频，您需要将 POST url 更改为您的服务器。
//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- 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>【讨论】：
以上是关于如何使用进度条快速上传大文件？的主要内容，如果未能解决你的问题，请参考以下文章