前端上传文件实时显示进度条和上传速度的工作原理是怎样的?_百度...

发布网友 发布时间：2022-04-24 04:33

我来回答

共2个回答

懂视网 时间：2022-05-15 23:21

本文实例为大家分享了js带进度条上传多视频的具体代码，供大家参考，具体内容如下

效果：

引用：

 <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" >
 <script src="jquery.fileupload.js"></script>
 <script src="http://malsup.github.com/jquery.form.js"></script>

html:

<p class="form-group">
 <label>产品视频：</label>
 <p class="videoUpfile">
 <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>
 <p class="videoMaterials">
  <p class="progress">
  <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  <span class="sr-only">0% Complete</span>
  </p>
  </p>
  <p class="files"></p>
  <p class="showimg"></p>
  <input type="hidden" value="" name="video_id[]">
  <p style="color: #b92c28" class="img_upload_info"></p>
 </p>
 </p>
 <p class="videoUpfile">
 <input type="file" name="avatarVideo" class="avatarVideo"><a class="btn deleteAvatarVideo" href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>
 <p class="videoMaterials">
  <p class="progress">
  <p class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  <span class="sr-only">0% Complete</span>
  </p>
  </p>
  <p class="files"></p>
  <p class="showimg"></p>
  <input type="hidden" value="" name="video_id[]">
  <p style="color: #b92c28" class="img_upload_info"></p>
 </p>
 </p>
</p>

script:

热心网友 时间：2022-05-15 20:29

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理一个chunk就更新uploaded size，然后浏览器端通过AJAX获取这个值和文件大小
最后用JavaScript渲染到页面上。

前端只能说会用框架和插件干活。前段时间用的百度的webuploader，demo就带进度条的。js代码不多可以看一下，猜测是监听事件。上传是前端和通信协议做的事，后端是写入。在比较传统流和和spring自带的transferto的耗时统称上传时间是不对的，应为写入时间。

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件。

nginx话lua可以拿到链接的套接口，读取套接口就可以知道当前上传了多少了。可以看下openresty的lualib/resty/upload.lua。