AJAX大文件切割上传以及带进度条。
分块传输的原理就是利用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大文件切割上传以及带进度条。的更多相关文章
- .NET Core Web 文件分片上传,带进度条实用插件
话不多说,上源码连接: 链接:https://pan.baidu.com/s/1_u15zqAjhH0aVpeoyVMfUA 提取码:z209
- Ajax+Java实现大文件切割上传
技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...
- java进行文件上传,带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- 支持IE低版本的上传 大文件切割上传 断点续传 秒传
1. http://files.cnblogs.com/files/blackice/UploadDemo.rar 此demo是使用的 swfupload 2.http://download.csdn ...
- ajax 异步上传视频带进度条并提取缩略图
最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...
- 【Web】前端文件上传,带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
- servlet多文件上传(带进度条)
需要commons-fileupload-1.3.jar和commons-io-2.4.jar的支持 页面效果:(图片文件都可以) (1)进度标识类 public class UploadStatus ...
- web文件上传,带进度条
原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- AJAX-----16HTML5实现大文件切割上传
2点多接了个电话导致失眠,没办法,跑起来接着板砖了...... 废话不多说,直接走码... <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Android密码约束规则例子一
Android常用的一个密码规则 (一)密码必须是8至16位:(二)密码必须包含英文字母和数字:(三)密码不能包含4位连续相同的字符,如0000或AAAA:(四)密码不能包含4位连续递增或连续递减的数 ...
- <Oracle Database>逻辑结构
逻辑结构 Oracle的逻辑结构是一种层次结构.主要由:表空间.段.区和数据块等概念组成.逻辑结构是面向用户的,用户使用Oracle开发应用程序使用的就是逻辑结构. 数据块 数据块是Oracle最小的 ...
- Web测试基础点
摘自:软件工程师成长之路 1.获取当前使用的Flash播放器版本(Flash Player Version)信息 在浏览器地址栏输入http://www.playerversion.com/,即可显示
- IOS和Android支持的音频编解码
1.IOS编码 参考文档地址:https://developer.apple.com/library/ios/documentation/AudioVideo/Conceptual/Multimedi ...
- HTML5中id可以用数字开头,但在css中不能正常使用
昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...
- 简单BigDecimal运算精度
项目中遇到了数值运算,如网上所写的,一般有这几个方法: /** * 提供精确的加法运算. * @param v1 被加数 * @param v2 加数 * @return 两个参数的和 */ publ ...
- Core Audio(二)
用户模式音频组件 在windows vista中,core audio apis充当用户模式音频子系统的基础,core audio apis作为用户模式系统组件的一个thin layer,它用来将用户 ...
- CardView
CardView继承至FrameLayout类,可以在一个卡片布局中一致性的显示内容,卡片可以包含圆角和阴影.CardView是一个Layout,可以布局其他View. CardView常用属性: c ...
- FastCgi 与 PHP-FPM
- 如果现在请求的是 /index.php,根据配置文件,nginx 知道这个不.是静态文件,需要去找 PHP 解析器来处理,那么他会把这个请求简单处理后交给 PHP 解析器.Nginx 会传哪些数据 ...
- 工作当中实际运用(1)——tab选项卡
不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...