js实现分割上传大文件


Posted in Javascript onMarch 09, 2016

本文实例介绍了js上传文件操作,分享给大家供大家参考,具体内容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>分割大文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 #test{
  width: 200px;
  height: 100px;
  border: 1px solid green;
  display: none;
 }
 #img{
  width: 50px;
  height: 50px;
  display: none;
 }
 #upimg{
  text-align: center;
  font: 8px/10px '微软雅黑','黑体',sans-serif;
  width: 300px;
  height: 10px;
  border: 1px solid green;
 }
 #load{
  width: 0%;
  height: 100%;
  background: green;
  text-align: center;
 }
</style>
</head>
 <body>
  <form enctype="multipart/form-data" action="file.php" method="post">
   <!-- 
   <input type="file" name="pic" />
   <div id="img"></div>
   <input type="button" value="uploadimg" onclick="upimg();" /><br />
   -->
   <div id="upimg">
    <div id="load"></div>
   </div>
   <input type="file" name="mof" multiple="multiple"/>
   <input type="button" value="uploadfile" onclick="upfile();" />
   <input type="submit" value="submit" />
  </form>
  <div id="test">
   测试是否DIV消失
  </div>
<script type="text/javascript">
 var dom=document.getElementsByTagName('form')[0];
 dom.onsubmit=function(){
  //return false;
 }
 var xhr=new XMLHttpRequest();
 var fd;
 var des=document.getElementById('load');
 var num=document.getElementById('upimg');
 var file;
 const LENGTH=10*1024*1024;
 var start;
 var end;
 var blob;
 var pecent;
 var filename;
 //var pending;
 //var clock;
 function upfile(){
  start=0;
  end=LENGTH+start;
  //pending=false;

  file=document.getElementsByName('mof')[0].files[0];
  //filename = file.name;
  if(!file){
   alert('请选择文件');
   return;
  }
  //clock=setInterval('up()',1000);
  up();

 }

 function up(){
  /*
  if(pending){
   return;
  }
  */
  if(start<file.size){
   xhr.open('POST','file.php',true);
   //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.onreadystatechange=function(){
    if(this.readyState==4){
     if(this.status>=200&&this.status<300){
      if(this.responseText.indexOf('failed') >= 0){
       //alert(this.responseText);
       alert('文件发送失败,请重新发送');
       des.style.width='0%';
       //num.innerHTML='';
       //clearInterval(clock);
      }else{
       //alert(this.responseText)
       // pending=false;
       start=end;
       end=start+LENGTH;
       setTimeout('up()',1000);
      }

     }
    }
   }
   xhr.upload.onprogress=function(ev){
    if(ev.lengthComputable){
     pecent=100*(ev.loaded+start)/file.size;
     if(pecent>100){
      pecent=100;
     }
     //num.innerHTML=parseInt(pecent)+'%';
     des.style.width=pecent+'%';
     des.innerHTML = parseInt(pecent)+'%'
    }
   }


 



 //分割文件核心部分slice
   blob=file.slice(start,end);
   fd=new FormData();
   fd.append('mof',blob);
   fd.append('test',file.name);
   //console.log(fd);
   //pending=true;
   xhr.send(fd);
  }else{
   //clearInterval(clock);
  }
 }

 function change(){
  des.style.width='0%';
 }
 
</script>
 </body>
</html>

file.php:

<?php 
/****
 waited
****/
//print_r($_FILES);exit;

$file = $_FILES['mof'];

$type = trim(strrchr($_POST['test'], '.'),'.');

// print_r($_POST['test']);exit;

if($file['error']==0){
 if(!file_exists('./upload/upload.'.$type)){
  if(!move_uploaded_file($file['tmp_name'],'./upload/upload.'.$type)){
   echo 'failed';
  }
 }else{
  $content=file_get_contents($file['tmp_name']);
  if (!file_put_contents('./upload/upload.'.$type, $content,FILE_APPEND)) {
   echo 'failed';
  }
 }
}else{
 echo 'failed';
}

?>

1 运行:

js实现分割上传大文件

2 选择2G文件测试:

js实现分割上传大文件

3 完成并正常播放:

js实现分割上传大文件

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
javascript对象3个属性特征
Nov 17 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 #Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 #Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 #Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 #Javascript
javascript html实现网页版日历代码
Mar 08 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
普罗米修斯教学反思
2014/02/06 职场文书
安全承诺书范文
2014/03/26 职场文书
主要领导对照检查材料
2014/08/26 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python