html5中的File对象继承Blob二进制对象，Blob提供了一个slice函数，可以用来切割文件数据。

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form method="post" id="myForm">

        <input type="file" name="file" id="upfile" />

        <input type="submit" name="submit" value="提交" />

    </form>

    <div id="upStatus"></div>

</body>

<script type="text/javascript">

    var myForm = document.getElementById("myForm");

    var upfile = document.getElementById("upfile");

    myForm.onsubmit = function() {

        //获取文件对象

        var file = upfile.files[0];

        //获取文件大小

        var fileSize = file.size;

        //一次截取的大小(字节)

        var CutSize = 1024 * 1024 * 10;

        //开始截取位置

        var CutStart = 0;

        //结束截取位置

        var CutEnd  = CutStart + CutSize;

        //截取的临时文件

        var tmpfile = new Blob();

        while(CutStart < fileSize) {

            tmpfile = file.slice(CutStart, CutEnd);

            //我们创建一个FormData对象

            var fd = new FormData();

            //把文件添加到FormData对象中

            fd.append("file", tmpfile);

            var xhr = new XMLHttpRequest();

            //这里使用同步

            xhr.open("post", "upfile.php", false);

            //上传进度

            console.log(Math.round( (CutStart + tmpfile.size) / fileSize * 100) + "%");

            //发送FormData对象

            xhr.send(fd);

            //重新设置截取文件位置

            CutStart = CutEnd;

            CutEnd = CutStart + CutSize;

        }

        return false;

    };

</script>

</html>

upfile.php代码如下：

<?php

$uploadDir = './upload/';

if(!file_exists($uploadDir)) {

    @mkdir($uploadDir, 0777, true);

}

$uploadFile = $uploadDir . basename($_FILES['file']['name']);

if(!file_exists($uploadFile)) {

    //如果文件不存在

    move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile);

} else {

    //如果文件已存在，追加数据

    file_put_contents($uploadFile, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);

}

php下ajax的文件切割上传的更多相关文章

  1. AJAX大文件切割上传以及带进度条。

    分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...

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

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

  3. SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    需求: 文件批量上传,支持断点续传. 文件批量下载,支持断点续传. 使用JS能够实现批量下载,能够提供接口从指定url中下载文件并保存在本地指定路径中. 服务器不需要打包. 支持大文件断点下载.比如下 ...

  4. Ajax实现文件的上传

    Ajax实现文件的上传 准备 ajax的参数补充 type不写的话默认是GET dataType和ContentType: dataType: 浏览器发给服务器希望返回的数据类型 .. 如果明确地指定 ...

  5. spring mvc ajax异步文件的上传和普通文件上传

    表单提交方式文件上传和ajax异步文件上传 一:首先是我在spring mvc下的表单提交方式上传 ssm的包配置我就不一一详细列出来了,但是上传的包我还是列出来 这一段我也不知道怎么给大家讲解就是直 ...

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

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

  7. ajax和原生ajax、文件的上传

    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...

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

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

  9. [Python]处理windows下多级目录文件，上传到Linux服务器

    #-*- coding: utf-8 -*- __author__ = 'tsbc' import sys reload(sys) sys.setdefaultencoding('utf-8') im ...

随机推荐

  1. ZooKeeper系列(1) 整体介绍（转）

    原文地址:https://www.cnblogs.com/wuxl360/p/5817471.html 一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术. ...

  2. Hive基础之排序

    order by 1.order by会对输入按照指定字段做全局排序,输出结果有序,因此只有一个reducer(多个reducer无法保证全局排序,手工设定reduce数量无效): 只有一个reduc ...

  3. HIbernate编程模型

    1.Hibernate: ORM框架,简化SQL开发,编程接口丰富,简化JDBC编程 2.有点: Lazy机制配合Fetch的HQL高级查询,提高开发效率 难点:理解Lazy与Fetch JOIN的原 ...

  4. php 学习笔记 设计和管理

    代码管理 文件路径.数据库名.密码禁止 hard coded 避免重复代码在多个页面复制粘贴 Gang of Four eXtreme Programming 的主要原则是坚决主张测试是项目成功的关键 ...

  5. Vuex以及axios 看这个

      vuex  -- 安装   npm i vuex  -- 配置   -- 导入vuex      import vuex from "vuex"   -- vue使用vuex  ...

  6. selenium+python自动化97--unittest参数化（paramunittest）

    前言 paramunittest是unittest实现参数化的一个专门的模块,可以传入多组参数,自动生成多个用例 前面讲数据驱动的时候,用ddt可以解决多组数据传入,自动生成多个测试用例.本篇继续介绍 ...

  7. Configure First SpringMVC project in IntelliJ IDEA(fail)

    Configure First SpringMVC project in IntelliJ IDEA 13 The Mechanism of Spring MVC frameworks by Java ...

  8. smokeping配置方法

    smokeping配置加Nginx https://lala.im/2821.html  (不完整)

  9. load data

    LOAD DATA INFILE 'D:\GX\\mm.txt' REPLACE INTO TABLE mm FIELDS TERMINATED BY ' ' // 以空格为分隔符插入数据,前提是mm ...

  10. bean-json-bean-json 工具

    package com.taotao.utils; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingExc ...