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. 2016年12月22日 星期四 --出埃及记 Exodus 21:17

    2016年12月22日 星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...

  2. Double Buffering Windows Forms

    Double Buffering Windows Forms As much as we would like it not to be the case, graphics can be slow ...

  3. 17-underscore库(下)

    一.函数介绍 1.bind 结构 _.bind(function, object, *arguments) 说明 一个对象中所有的成员函数的this都指向这个对象 举例 _.bind(function ...

  4. Cheatsheet: 2016 02.01 ~ 02.29

    Web How to do distributed locking Writing Next Generation Reusable JavaScript Modules in ECMAScript ...

  5. php进制转换函数

    1 十进制(decimal system)转换函数 ① 十进制转二进制 string  decbin(int number). 参数为一个十进制整型数字,不是整型数字会自动转为整型数字,如'3'转为3 ...

  6. js之oop <三>属性标签

    读取属性标签 获取对象属性标签,用 Object.getOwnPropertyDescriptor方法.getOwnPropertyDescriptor(); 参数:属性所在对象(object),属性 ...

  7. NPM 使用介绍

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...

  8. jQuery ------------> 验证表单

    简单的东西重复做,做多了之后,才能说熟能生巧. 做好一个精美的页面,固然是好,但是,一个页面除了写好之外,我们更需要的是将其功能完善.比如表单的验证,这只是众多工作之一.然后本次就以jQuery的va ...

  9. 火狐浏览器Firefox上DownThemAll插件

    DownThemAll插件支持断点续传.多线程下载,可以大幅度提高下载速度. 在Windows平台上,要下载大量的文件,迅雷自然是首选:但在非Windows平台上,只要安装一个火狐浏览器,再安装Dow ...

  10. 用Js+css3实现图片旋转,缩放,裁剪,滤镜

    还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...