首页 > 其他分享 >js实现分割上传大文件

js实现分割上传大文件

时间:2023-11-13 18:22:06浏览次数:29  
标签:分割 pecent width upload js start file var 上传

本文实例介绍了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 运行:

 

2 选择2G文件测试:

 

3 完成并正常播放:

 

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

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/13/js%e5%ae%9e%e7%8e%b0%e5%88%86%e5%89%b2%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6/

欢迎入群一起讨论

 

 

标签:分割,pecent,width,upload,js,start,file,var,上传
From: https://www.cnblogs.com/songsu/p/17829805.html

相关文章

  • uniapp(安卓)之文件上传
    uniapp(安卓)之文件上传uniapp提供的uni.chooseFile只支持H5和微信小程序,所以想上传除图片/视频外的非媒体文件,需要使用原生的方式开发。 uploadtxdr(){//使用plus选择文件 letthat=this; letfilePath='' letmain=plus.android.runtimeMainAct......
  • Newtonsoft.Json 入门介绍
    本人是C#小白,这里摘抄并整理了两位大神的文章:Newtonsoft.Json笔记-JToken、JObject、JArray详解Json基于类Newtonsoft.Json.Linq.JToken的应用简介 简单介绍如何使用Newtonsoft.Json类库和操作Json对象,这里主要介绍LinqtoJson类。Newtonsoft.Json封装类实现了JToken,直......
  • Python | 将本地文件上传到远程服务器
    在Python中,可以使用paramiko库来通过SSH进行文件的传输。首先,你需要安装paramiko库,可以使用以下命令进行安装:pipinstallparamiko然后,你可以使用以下Python脚本进行文件传输:此脚本使用SFTP协议进行文件传输。在SFTP的上下文中,你可以使用put方法将本地文件上传到远程服务器。......
  • vuejs3.0 从入门到精通——Vuex 4.x —— Getter
    Vuex4.x——Getterhttps://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数:computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}} 如......
  • 使用PageHelper.startPage时 net.sf.jsqlparser.parser.ParseException: Encountered
    使用PageHelper.startPage时net.sf.jsqlparser.parser.ParseException:Encountered解决方案对比代码:原来的写法:PageHelper.startPage(page,size,order);List<xxx>list=xxxMapperExt.selectxxx(id,type);修改之后:PageHelper.startPage(page,size);List<xxx>list=xxxM......
  • nodejs学习03——包管理工具npm
    关于npm的国内镜像源一、说明在前端开发的时候使用国外的镜像源速度很慢并且容易下载失败,有时候需要尝试多次才有可能下载成功,很麻烦,因此可以切换为国内镜像源,下面为常用的npm,yarn,pnpm切换国内镜像源(以淘宝为例)的方式。二、NPM切换镜像源查看当前的镜像源。npmconfigge......
  • fastadmin框架控制器传值给Js文件
    1.传值 2.使用Config.xxx ......
  • vuejs3.0 从入门到精通——Vuex 4.x —— state
    Vuex4.x——statehttps://vuex.vuejs.org/zh/guide/state.html一、单一状态树 Vuex使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着,每个应用将仅仅包含一个store实例。单一状......
  • 使用nvm使Windows电脑支持多个Nodejs版本
     Node.js一台电脑只能装一个版本,但是有时候开发项目会用到不同版本的Node.js,卸载再装是很麻烦的,而nvm就是解决这个问题的,有了它就可以在一个电脑上安装多个Node.js版本,并且在不同版本之间切换使用。 下载github下载地址:https://github.com/coreybutler/nvm-windows/releases......
  • vuejs3.0 从入门到精通——Vuex
    Vuexhttps://vuex.vuejs.org/zh/一、Vue是什么? Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。1.1、什么是"状态管理模式"? 状态管理模式是一种在前端开发中管理......