因业务需求需要向伺服器上传大于1GB以上的视频文件，其实网上也能找到很多大文件上传的第三方组件，问题是要么用起来相当不方便，总出现一些bug，要么收费太贵(费用几千，甚至还限定使用数量)，最终自己开发了个前端用javascript获取文件数据，通过Ajax向后台发送文件数据的大文件上传组件。该js组件使用方便，可对界面、每次抓取数据量等进行设置。后台接收文件数据代码已进行封闭，调用时只需要简单的几行代码就可轻松搞定。

前台js代码调用如下：

后台代码如下：

上传文件效果：

视频文件上传至目录：D:\wamp64\www\up6\db\upload\2019\04\25\862c9ea8b77640fb82605bd6d388a878

​​

可以看出上传过程中没有丢包，直接可以播放。

DEMO下载地址：https://dwz.cn/fgXtRtnu

Javascript上传超大文件实例的更多相关文章

  1. Github Upload Large File 上传超大文件

    Github中单个文件的大小限制是100MB,为了能突破这个限制,我们需要使用Git Large File Storage这个工具,参见这个官方帖子,但是按照其给的步骤,博主未能成功上传超大文件,那么 ...

  2. .net上传超大文件解决方案

    HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...

  3. asp.net上传超大文件

    HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...

  4. 利用HTML5分片上传超大文件

    在网页中直接上传大文件一直是个比较头疼的问题,主要面临的问题一般包括两类:一是上传时间长中途一旦出错会导致前功尽弃:二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默 ...

  5. PHP/Laravel轻松上传超大文件

    我们知道,在以前,文件上传采用的是直接传整个文件的方式,这种方式对付一些小文件是没有问题的.而当需要上传大文件时,此种方式不仅操作繁琐,需要修改web服务器和后端语言的配置,而且会大量占用服务器的内存 ...

  6. B/S上传超大文件解决方案

    4GB以上超大文件上传和断点续传服务器的实现 随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求. 但是在很多情况下,平台运营方并没有大文件上 ...

  7. js上传超大文件解决方案

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  8. PHP上传超大文件解决方案

    一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...

  9. Web上传超大文件解决方案

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...

随机推荐

  1. 10-安装es

    1.安装jdk(jdk要求1.8.20或1.7.55以上) 2.上传es安装包 3.解压es tar -zxvf elasticsearch-2.3.1.tar.gz -C /opt/app/ 4.e ...

  2. 反序列化失败Failed to deserialize --- local class incompatible: stream classdesc serialVersionUID

    反序列化失败: java.lang.IllegalStateException: Failed to execute CommandLineRunner at org.springframework. ...

  3. 非virtual函数，用指针进行upcast

    void print_func(A* p) { p -> print(); } int main() { A a(); B b(,); //a.print(); //b.print(); pri ...

  4. java 多线程学习

    一.概念 程序.进程.线程 程序   是计算机指令的集合. 进程   是一个运行中的程序,它指的是从代码加载,执行到执行结束这样一个完整过程.每个进程占用不同的内存空间. 线程   是进程中某个单一顺 ...

  5. 基于maven构建javaweb项目思路梳理及改进

    需要准备的东西: Jdk. myeclipse. maven包 预装jdk环境 1.maven安装及配置: a)      详见url https://www.cnblogs.com/eagle668 ...

  6. docker安装portainer

    安装好docker之后,可以使用portainer对容器进到管理 docker安装portainer命令 #这一步可以省略,直接运行可以下一条docker pull portainer #因为dock ...

  7. react-native 新手爬坑经历(unable to load script from assets 和could not connect to development server.)

    按照https://reactnative.cn/docs/0.51/getting-started.html教程新建的项目 react-native init AwesomeProject cd A ...

  8. linux下安装haproxy作为端口转发服务器，以及安装keepalived作为haproxy高可用方案

    一.安装haproxy作为端口转发服务器(主服务器:172.28.5.4,备服务器:172.28.5.8,浮点IP为:172.28.5.6) 1.安装依赖包 yum -y install wget g ...

  9. UGUI中Text的换行

    通过代码中的\n可以直接执行换行效果,但是我们在平常的工作中一般都是读表,既在Inspector面板中的Text组件中输入同样的内容就达不到换行效果: 其实unity把\n转变成了\\n,我们只需要变 ...

  10. 纯css loading动效

    .loading {margin: 100px;     width: 3px; height:3px;     border-radius: 100%;                      / ...