正文

如何使用进度条快速上传大文件？

 2023-02-24  146

关键词：

【中文标题】如何使用进度条快速上传大文件？【英文标题】：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>

【讨论】：

文件上传和进度条

...我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但如何根据读取的数据显示进度条。我是否应该根据读取的数据量向JS代码发送计数响应，如果可以，... 查看详情

如何使用 Apache HttpClient 4 获取文件上传的进度条？

】如何使用ApacheHttpClient4获取文件上传的进度条？【英文标题】：HowtogetaprogressbarforafileuploadwithApacheHttpClient4?【发布时间】：2011-10-2619:20:52【问题描述】：我有以下代码用于使用Apache的HTTP客户端(org.apache.http.client)上传文件：publics... 查看详情

在Android中上传带有进度条且没有OutOfMemory错误的大文件

...述】：上传大型视频文件（最大150MB）时遇到问题1.当我使用此代码Link1时。我可以上传带有进度条的小文件，但由于我的文件很大，所以android给我OutOf 查看详情

Flutter 上传带有进度条的大文件。 App 和 Web 都支持

...挂起时，为Web和应用程序（本机）编译的颤振应用程序。如何将大文件作为流请求发送。我是Flutter的新手，正在开发当前现有的应查看详情

使用 jquery ui 进度条上传文件

...】：我正在使用jCrop，我想为图片上传添加一个进度条，如何让jqueryui进度条加载图片字节？【问题讨论】：我相信这个帖子是相关的***.com/questions/8367539/…【参考方案1】：这是一个很棒的Plugin，这是Demo【讨论】：【参考方案查看详情

asp.net上传大文件带进度条swfupload

Asp.Net基于swfupload上传大文件带进度条百分比显示，漂亮大气上档次，大文件无压力，先看效果一、上传效果图1、上传前界面：图片不喜欢可以自己换2、上传中界面：百分比显示 3、上传后返回文件地址，我测试呢所以乱写... 查看详情

快速在 UICollectionView 中显示多个图像上传的进度条

...ift【发布时间】：2016-03-1712:12:34【问题描述】：我有一个使用UICollectionView设计的聊天视图。我已经成功实现了图像上传功能，每当用户使用图像选择器单击图像时，图像就会被上传到服务器。现在我正在尝试为每个查看详情

文件上传进度条干扰控制器重定向

...是，控制进度条的javascript会干扰我的控制器，我不知道如何修复它。我的控制器从不使用链接重定向回家（它在没有实现进度条的情况下工作）。删除window.locatio 查看详情

如何通过 ASP.NET MVC 上传文件并显示进度条？

】如何通过ASP.NETMVC上传文件并显示进度条？【英文标题】：HowcanIuploadafileviaASP.NETMVCandshowaprogressbar?【发布时间】：2010-11-0122:56:22【问题描述】：我希望允许用户在我的ASP.NETMVC应用程序中浏览文件并将其上传到服务器。如果可能... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

如何在ajax文件上传中显示进度条

】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情

ajax大文件切割上传以及带进度条。

分块传输的原理就是利用HTML5新增的文件slice截取函数。代码如下：html：<inputid="f"type="file"name="part"onchange="writeFile()">JS：核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去... 查看详情

将图像上传到 Firebase 存储时如何制作进度条？

】将图像上传到Firebase存储时如何制作进度条？【英文标题】：howcanimakeaprogressbarwheniuploadaimagetomyfirebasestorage?【发布时间】：2019-09-1403:31:44【问题描述】：我想取得进展，向用户展示上传了多少文件，这样他就不会在上传过程中... 查看详情

php使用进度条上传文件(代码片段)

查看详情

使用 RestTemplate.postForLocation 的文件上传进度条

】使用RestTemplate.postForLocation的文件上传进度条【英文标题】：FileuploadprogressbarusingRestTemplate.postForLocation【发布时间】：2012-12-0217:15:29【问题描述】：我有一个将文件上传到REST服务的Java桌面客户端应用程序。所有对REST服务的调... 查看详情

js+php分片上传大文件组件

1.使用PHP的创始人RasmusLerdorf写的APC扩展模块来实现（http://pecl.php.net/package/apc）APC实现方法：安装APC，参照官方文档安装，可以使用PECL模块安装方法快速简捷，这里不说明配置php.ini，设置参数apc.rfc1867=1，使APC支持上传进度条功... 查看详情

如何在 Django 中上传文件并显示进度条？

】如何在Django中上传文件并显示进度条？【英文标题】：HowtouploadafileandshowprogressbarinDjango?【发布时间】：2011-07-0117:28:33【问题描述】：我已经编写了在Django中上传文件的代码，如下所示：defupload(request):ifrequest.method==\'POST\':form=Up... 查看详情