html前台代码:

<form id="upload_form" name="upload_form" action="javascript:init();"
method="post" enctype="multipart/form-data">
<div>
<label for="file">
请选择文件
</label>
&nbsp;上传到的地址为http://bi.xiaoyou-game.com/upload/类型/文件名
</div>
<div>
<input type="file" id="file" name="file" onchange="fileReady()">
<div>
<input type="submit" id="submit" name="submit" value="上传">
<button id="clear" onclick="clearUploadFile()">
清除
</button>
<div class="upload_message_show">
<!--进度条-->
<div class="upload_bar_box">
<div class="upload_bar">
</div>
<span class="upload_percent">
</span>
</div>
<!--上传剩余时间和上传速度-->
<div class="upload_count">
<div class="left_time">
剩余时间 | 00:00:00
</div>
<div class="speed">
100k/s
</div>
</div>
<!--文件信息-->
<div class="upload_file_message">
<div class="message_box">
<div class="upload_file_name">
</div>
<div class="upload_file_size">
</div>
<div class="upload_file_type">
</div>
<div class="upload_file_error">
</div>
<div class="isCompleted">
</div>
</div>
<!-- <div class="upload_file_preview"></div> -->
</div>
</div>
</form>
</div>
<img src="" id="compressTemp" style="display:none;">
<canvas id="canvas" style="display:none;">
</canvas>
<script type="text/javascript" src="http://bi.xiaoyou-game.com/static/js/html5_upload_ano.js">
</script>

html5_upload_ano.js代码:

var nSlice_count = 200,//分段数
nFactCount, //实际分段数
nMin_size = 0.5,//最小分段大小(M)
nMax_size = 5, //最大分段大小(M)
nFactSize, //实际分段大小
nCountNum = 0, //分段标号
sFile_type, //文件类型
nFile_load_size, //文件上传部分大小
nFile_size, //文件大小
nPreuploaded = 0, //上一次记录上传部分的大小
bIs_uploading= false,//是否上传中
bStart_upload= false,//是否开始上传
bEnd_upload = false;//是否上传完成 function init(){
var $con = document.getElementById("submit").value; bStart_upload = ($con=="上传"?true:false);
if(bStart_upload)
{
if(!bEnd_upload)
document.getElementById("submit").value = "暂停";
}
else
{
clearTimeout('timer');
document.getElementById("submit").value = "上传";
}
if(!bEnd_upload && bStart_upload)
startUpload();
} function startUpload(){
var form = document.forms["upload_form"];
if(form["file"].files.length<=0)
{
alert("请先选择文件,然后再点击上传");
return;
} var file = form["file"].files[0]; var get_file_message = (function(){ var get_message = {
get_name:function(){
return file.name;
},
get_type:function(){
return file.type; },
get_size:function(){
return file.size;
},
getAll:function(){
return {
fileName : this.get_name(),
fileSize : this.get_size(),
fileType : this.get_type()
}
}
};
return get_message;
})(); var conversion = (function(){
var unitConversion = {
bytesTosize:function(data){
var unit = ["Bytes","KB","MB","GB"];
var i = parseInt(Math.log(data)/Math.log(1024));
return (data/Math.pow(1024,i)).toFixed(1) + " " + unit[i];
},
secondsTotime:function(sec){
var h = Math.floor(sec/3600),
m = Math.floor((sec-h*3600)/60),
s = Math.floor(sec-h*3600-m*60);
if(h<10) h = "0" + h;
if(m<10) m = "0" + m;
if(s<10) s = "0" + s; return h + ":" + m + ":" + s + ":";
}
}; return unitConversion;
})(); //start sending
var reader = new FileReader();
var timer; var fProgress = function(e){
var fSize = get_file_message.getAll().fileSize;
timer = setTimeout(uploadCount(e,fSize,conversion),300);
}; var floadend = function(e){
if(reader.error){alert("上传失败,出现未知错误");clearTimeout(timer);return;}
clearTimeout(timer);
if(nCountNum+1!=nFactCount)
{
if(bStart_upload)
{
nCountNum++;
uploadStart();
return;
} else {
document.querySelector(".speed").innerHTML = "0k/s";
document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
return;
}
} bEnd_upload = true;
document.querySelector(".speed").innerHTML = "0k/s";
document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
document.querySelector(".upload_percent").innerHTML = "100.00%";
document.getElementById("submit").value = "上传";
document.querySelector(".upload_bar").style.width = "100%"; var $res = JSON.parse(e.target.responseText);
filePreview($res);
if($res.res=="success") {
bIs_uploading =true;
document.querySelector("#package_url").value=$res.package_url;
}
document.querySelector(".isCompleted").innerHTML="上传状态: " + (bIs_uploading?"上传完成":"正在上传..");
}; var uploadStart = function(){
var get_all = get_file_message.getAll();
var start = nCountNum * nFactSize,
end = Math.min(start+nFactSize,get_all.fileSize); var fData = new FormData(); fData.append("file",file.slice(start,end));
fData.append("name",file.name);
fData.append("size",file.size);
fData.append("type",file.type);
fData.append("totalCount",nFactCount);
fData.append("indexCount",nCountNum); //fData.append("crc32",CRC32(file.size)); fData.append("trueName",file.name.substring(0,file.name.lastIndexOf("."))); if(!sFile_type)
sFile_type = file.type.substring(0,file.type.indexOf("/"));
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress",fProgress,false);
xhr.addEventListener("load",floadend,false);
xhr.addEventListener("error",errorUp,false);
xhr.addEventListener("abort",abortUp,false); xhr.open("POST","http://bi.xiaoyou-game.com/class/function/"); //后台php路径
xhr.send(fData);
}; reader.onloadstart = function(){
var get_all = get_file_message.getAll(),
fName = get_all.fileName,
fType = get_all.fileType,
fSize = conversion.bytesTosize(get_all.fileSize); document.querySelector(".upload_message_show").style.display = "block";
document.querySelector(".upload_file_name").innerHTML ="文件名称: " + fName;
document.querySelector(".upload_file_type").innerHTML ="文件类型: " + fType;
document.querySelector(".upload_file_size").innerHTML ="文件大小: " + fSize;
document.querySelector(".isCompleted").innerHTML ="上传状态: " + (bIs_uploading?"完成":"正在上传中.."); nFactSize = Math.floor(get_all.fileSize/nSlice_count);
nFactSize = (nFactSize>=nMin_size*1024*1024?nFactSize:nMin_size*1024*1024);
nFactSize = (nFactSize<=nMax_size*1024*1024?nFactSize:nMax_size*1024*1024);
nFactCount= Math.ceil(get_all.fileSize/nFactSize); uploadStart();
}; reader.readAsBinaryString(file);
} function uploadCount(e,fSize,conversion){
var upSize = e.loaded+nCountNum*nFactSize,
perc = (upSize*100/fSize).toFixed(2) + "%";
var speed = Math.abs(upSize - nPreuploaded);
if(speed==0){clearTimeout("timer");return;}
var leftTime = conversion.secondsTotime(Math.round((fSize-upSize)/speed));
speed = conversion.bytesTosize(speed)+"/s";
document.querySelector(".speed").innerHTML = speed;
document.querySelector(".left_time").innerHTML = "剩余时间 | " + leftTime;
document.querySelector(".upload_percent").innerHTML = perc;
document.querySelector(".upload_bar").style.width = perc;
nPreuploaded = upSize;
} function messageChange(){
document.querySelector(".upload_file_name").innerHTML ="文件名称: " ;
document.querySelector(".upload_file_type").innerHTML ="文件类型: " ;
document.querySelector(".upload_file_size").innerHTML ="文件大小: " ;
document.querySelector(".isCompleted").innerHTML ="上传状态: " ;
document.querySelector(".upload_bar").style.width = "0%";
document.querySelector(".upload_percent").innerHTML = "0%";
//document.querySelector(".upload_file_preview").innerHTML ="";
document.querySelector(".upload_message_show").style.display = "none";
} function clearUploadFile(){
var e = e || event;
e.stopPropagation();
e.preventDefault();
document.getElementById("file").value = "";
bStart_upload = false;
messageChange();
} function fileReady(){
bIs_uploading = false;
bEnd_upload = false;
nCountNum = 0;
bStart_upload = false;
messageChange();
} function errorUp(){
bStart_upload = false;
document.querySelector(".upload_file_error").innerHTML = "上传过程中出错";
} function abortUp(){
bStart_upload = false;
document.querySelector(".upload_file_error").innerHTML = "网络故障,请检查重试";
} function filePreview($src){
var ftype = sFile_type;
var $temp;
var IMGMaxHeight = document.querySelector(".upload_message_show").offsetHeight;
switch(ftype){
case "image" :
$temp = '<img src="source/'+$src.url+'" style="max-height:'+IMGMaxHeight+'px;margin-left:30%;">';
break;
case "audio" :
$temp = '<audio src="source/'+$src.url+'" controls="controls"></audio>';
break;
case "video" :
$temp = '<video src="source/'+$src.url+'" controls="controls"></video>';
break;
case "rar":
$temp = '<span>rar文件;</span>';
case "zip":
$temp = '<span>zip文件</span>';
}
/* if(IsPreview)
document.querySelector(".upload_file_preview").innerHTML = $temp;*/
}

PHP后台代码:

public function do_upload()
{ $fsize = $_POST['size'];
$findex =$_POST['indexCount'];
$ftotal =$_POST['totalCount'];
$ftype = $_POST['type'];
$fdata = $_FILES['file'];
$fname = mb_convert_encoding($_POST['name'],"gbk","utf-8");
$type = end(explode(".",$fname));
$allowed_type = array('apk','ipa','jpg','png','gif');
if( !in_array($type,$allowed_type)){
echo json_encode(array('res' => 'fail'));
exit;
} $truename = mb_convert_encoding($_POST['trueName'],"gbk","utf-8"); $dir = PACKAGE_URL . $type ; //PACKAGE_URL为绝对路径,/var/www/.... $save = $dir."/".$fname;
if(!is_dir($dir))
{
mkdir($dir);
chmod($dir,0777);//给文件夹以写的权限
} //读取临时文件内容
$temp = fopen($fdata["tmp_name"],"r+");//打开
$filedata = fread($temp,filesize($fdata["tmp_name"]));//读取文件 //将分段内容存放到新建的临时文件里面
if(file_exists($dir."/".$findex.".tmp")) unlink($dir."/".$findex.".tmp");//是否存在当前的临时片名
$tempFile = fopen($dir."/".$findex.".tmp","w+");//打开 fwrite($tempFile,$filedata);//写入
fclose($tempFile);//关闭 fclose($temp); if($findex+1==$ftotal)
{
if(file_exists($save)) @unlink($save);
//循环读取临时文件并将其合并置入新文件里面
for($i=0;$i<$ftotal;$i++)
{
$readData = fopen($dir."/".$i.".tmp","r+");
$writeData = fread($readData,filesize($dir."/".$i.".tmp"));//读取文件 $newFile = fopen($save,"a+");
fwrite($newFile,$writeData); fclose($newFile); fclose($readData); $resu = @unlink($dir."/".$i.".tmp");
}
$fnewszie = filesize($dir."/".$fname); if($fsize==$fnewszie)
{
$test = "succe";
}else{
$test = "fail";
} $res = array("res"=>"success","test"=>$test,"fsize"=>$fsize,"newsize"=>$fnewszie,"url"=>mb_convert_encoding($truename."-".$fsize."/".$fname,'utf-8','gbk'),"package_url"=>'http://bi.xiaoyou-game.com/upload/'.$type.'/'.$fname); echo json_encode($res);
}
}

PHP Html5上传大文件的更多相关文章

  1. ASP.NET 使用 plupload 上传大文件时出现“blob”文件的Bug

    最近在一个ASP.NET 项目中使用了plupload来上传文件,结果几天后客户发邮件说上传的文件不对,说是文件无法打开 在进入系统进行查看后发现上传的文件竟然没有后缀,经过一番测试发现如果文件上传的 ...

  2. [Asp.net]Uploadify上传大文件,Http error 404 解决方案

    引言 之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章:[Asp.net]Upl ...

  3. php 上传大文件配置upload_max_filesize和post_max_size选项

    php 上传大文件配置upload_max_filesize和post_max_size选项 (2014-04-29 14:42:11) 转载▼ 标签: php.ini upload _files[f ...

  4. PHP上传大文件 分割文件上传

    最近遇到这么个情况,需要将一些大的文件上传到服务器,我现在拥有的权限是只能在一个网页版的文件管理系统来进行操作,可以解压,可以压缩,当然也可以用它来在线编辑.php文件. 文件有40M左右,但是服务器 ...

  5. ASP.NET上传大文件的问题

    原文:http://www.cnblogs.com/wolf-sun/p/3657241.html?utm_source=tuicool&utm_medium=referral 引言 之前使用 ...

  6. php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项

    php 上传大文件主要涉及配置 upload_max_filesize 和post_max_size两个选项   今天在做上传的时候出现一个非常怪的问题,有时候表单提交可以获取到值,有时候就获取不到了 ...

  7. SWFUpload上传大文件(暂时用用,真正用的时候还是要改的)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. PHP上传大文件和处理大数据

    1. 上传大文件 /* 以1.5M/秒的速度写入文件,防止一次过写入文件过大导致服务器出错(chy/20150327) */ $is_large_file = false; if( strlen($x ...

  9. QQ上传大文件为什么这么快

    今天和同事在群里讨论“QQ上传大文件/QQ群发送大文件时,可以在极短的时间内完成”是如何做到的. 有时候我们通过QQ上传一个几百M的文件,竟然只用了几秒钟,从带宽上限制可以得出,实际上传文件是不可能的 ...

随机推荐

  1. Flowplayer-Subtitle

    SOURCE URL: https://flowplayer.org/docs/subtitles.html Setting up Subtitles are loaded with a <tr ...

  2. [转]unicode,ansi,utf-8,unicode big endian的故事

    unicode,ansi,utf-8,unicode big endian的故事很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的 ...

  3. [poj2777] Count Color (线段树 + 位运算) (水题)

    发现自己越来越傻逼了.一道傻逼题搞了一晚上一直超时,凭啥子就我不能过??? 然后发现cin没关stdio同步... Description Chosen Problem Solving and Pro ...

  4. VS下的解决方案目录结构设置和管理

    转载:http://blog.csdn.net/pl20140910/article/details/52074165 为了方便管理自己写的代码,也为了日后工作能方便的查找之前做过相同的代码,仿照某源 ...

  5. qq2440启动linux后插入u盘出现usb 1-1: device descriptor read/64, error -110,usb 1-1: device not accepting address 8, error -110

    上位机:ubuntu14.04 64bit 下位机:qq2440 交叉编译器:arm-linux-gcc 3.4.1 下位机使用的linux内核版本:kernel2.6.13 1.插入u盘时错误信息如 ...

  6. Quick-Cocos2d-x初学者游戏教程1

    Quick-Coco2d-x安装: Quick 安装完成后,在它的根目录下可以找到有两个名为setup_mac.sh.setup_win.bat的批处理脚本,它们分别是搭建Mac和Windows开发环 ...

  7. Java:描述反射机制的作用?举几个反射的应用?

    比较全的解释了:JAVA反射机制 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方 ...

  8. javascript事件之:谈谈自定义事件

    对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一个appear事件.当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只 ...

  9. Linux nginx日志按天分割实例

    Linux nginx日志按天分割实例   nginx的日志有个小缺点,日志文件一直就是一个,不会自动地进行切割,如果访问量很大的话,将导致日志文件非常大,不便于管理这就需要我们自己来实现了,按日期每 ...

  10. tfs 分支

    集团-IT部张强 11:15:211.主干时刻处于稳定状态,随时可以发布.设专门人员对主干代码进行管理,普通开发人员只读. 2.为开发任务建立开发分支.常规的可以以小组为单位建立分支,较大的任务可以建 ...