分块传输的原理就是利用HTML5新增的文件slice截取函数。

代码如下:

html:

<input id="f" type="file" name="part" onchange="writeFile()">

JS:

核心部分已经加粗显示了,其他部分不用看,因为实现的方式有很多种,不一定要按照我的方式去写,但是核心是不会变的。

var writeFile = function(){
  var temp = null;
  var formData = null;
  var xhr = null;

  var file = document.getElementById('f');
  var f = file.files[0];
  var totalSize = f.size;

  // 每次截取的大小
  var num = 1024*1024;

  var start = 0;
  var end = start + num;

  // 发送到的地址
  var url = 'http://127.0.0.1/index.php';

  // 进度条
  var loaded = function(bili){
    console.log(bili);
  };

  writeFile = function(){
    // 如果已经截取完了跳出这个函数。
    if(start>=totalSize)return;

    // 截取文件
    temp = f.slice(start,end);

    formData = new FormData();
    formData.append(file.name,temp);

    xhr = new XMLHttpRequest();
    xhr.open('POST',url);

    xhr.onreadystatechange = function(){
      if(this.readyState===4 && this.status===200){
        // 改变下一次截取的位置
        start = end;
        end = start + num;
        // 因为截取可能超过totalSize,判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
        if(end>totalSize){
          end = totalSize;
        }
        // 可以用这个做进度条
        loaded((start/totalSize)*100);
        // 递归,如果文件没有截取完,继续截取
        writeFile();
      }
    };
    xhr.send(formData);
  };

  // 调用一下
  writeFile();
};

当然除了这些还是不够的,后端也是需要处理一下的,因为现在发送过去的文件是一块一块的,所有需要合并一下,不过已经和前端没有关系了,但我还是给出代码吧。

<?php

// 判断是否有这个文件
if(!file_exists('./a/up.wmv')){

  //创建一个文件
  move_uploaded_file($_FILES['part']['tmp_name'],'./a/up.wmv');
}else{

  //将前面的那个文件和当前这个文件合并,FILE_APPEND把当前这个内容追加上去。
  file_put_contents('./a/up.wmv',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
  echo 'ok';
}

?>

AJAX大文件切割上传以及带进度条。的更多相关文章

  1. .NET Core Web 文件分片上传,带进度条实用插件

    话不多说,上源码连接: 链接:https://pan.baidu.com/s/1_u15zqAjhH0aVpeoyVMfUA 提取码:z209

  2. Ajax+Java实现大文件切割上传

    技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...

  3. java进行文件上传,带进度条

    网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...

  4. 支持IE低版本的上传 大文件切割上传 断点续传 秒传

    1. http://files.cnblogs.com/files/blackice/UploadDemo.rar 此demo是使用的 swfupload 2.http://download.csdn ...

  5. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

  6. 【Web】前端文件上传,带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

  7. servlet多文件上传(带进度条)

    需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...

  8. web文件上传,带进度条

    原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...

  9. AJAX-----16HTML5实现大文件切割上传

    2点多接了个电话导致失眠,没办法,跑起来接着板砖了...... 废话不多说,直接走码... <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. C#实现HttpPost提交文件

    先建立一个WebApplication Web.config <?xml version="1.0" encoding="utf-8"?> < ...

  2. linux shell

    1.+到n for i in {1..n}doa=$(($a+$i))doneecho $a 2. 写一个脚本.输入如下效果 0 01 012 0123 01234 012345 0123456 01 ...

  3. NOI 4976:硬币

    描述 宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面值分别为a1,a2- an. Bob在机场看到了一个特别喜欢的礼物,想买来 ...

  4. log4j写入数据库

    转发自http://www.cnblogs.com/adolfmc/p/3432720.html Log4j 配置数据库连接池(将日志信息保存到数据库) org.apache.log4j.jdbc.J ...

  5. android ProgressBar 进度条的进度两端是圆角的方法

    转自 http://www.jianshu.com/p/6e7ea842d5ce 另外工作原理可以参考http://blog.csdn.net/lan603168/article/details/44 ...

  6. codeforces 484E

    题意:给定n<=105的数组h,有m<=105的询问,每个询问为l,r,w求[l,r]区间内连续w个的最小高度最大是多少.. 思路:首先把h数组从大到小排序,然后用建立一个可持久化的下标线 ...

  7. 开源的EtherCAT Master简介

    EtherCAT的主站开发是基于EtherCAT机器人控制系统的开发中非常重要的环节.目前常见开源的主站代码为的RT-LAB开发的SOEM (Simple OpenSource EtherCAT Ma ...

  8. 黑马程序员+ADO.Net基础(下)

    ---------------<a href="http://edu.csdn.net"target="blank">ASP.Net+Android ...

  9. On One Side Kolmogorov Type Inequalities

    Let \(X_1,X_2,\ldots,X_n\) be independent random variables. Denote \[S_n=\sum_{i=1}^n X_i.\] The  we ...

  10. 使用WPF动态生成Code 39条形码

    最近在看些条形码方面相关的资料,而如果只是看的话,效果似乎并不怎么好,所以决定动手做点Demo,以增强对相关知识的记忆. 这里是一个我编写的使用WPF生成Code 39的例子,Code 39的编码很简 ...