为了解决大文件上传 （PHP上传最大限制2GB）
同时为了解决文件上传是对服务器造成的压力
可以通过分段上传解决这个问题，这得益于HTML5开发的file API
前台代码：
引用了进度条插件myProgress.js
<link href="__PUBLIC__/admin/css/myProgress.css" rel="stylesheet">
<script src="__PUBLIC__/admin/js/jquery.myProgress.js"></script>
<div>
<div>
<form id="myForm">
<div>
//上传文件时由用户指定文件名
<label for="FileName">File Name</label>
<input type="text" name="title" class="form-control" id="FileName">
</div>
<div>
<label for="myFile">Chose File</label>
<input type="file" id="myFile">
<div class="progress-out" id="progress">
<div class="percent-show"><span>0</span>%</div>
<div class="progress-in"></div>
</div>
</div>
</form>
<button type="button" class="btn btn-default" id="btn">Submit</button>
</div>
</div>
<script>
//初始化上传
function initUpload() {
var chunk = 1000*1024; //每片大小
var input = document.getElementById("myFile"); //input file
input.onchange = function (e) {
//获得上传的文件
var file = this.files[0];
//如果大于指定大小 提示错误
if(file.size > 1*1024*1024*1024){
$('#help_msg').removeClass('help-block').addClass('error-block');
return ;
}else{
$('#help_msg').css('display','none');
}
// 开启进度条
$("#progress").css('display','block');
$("#progress").myProgress({speed: 1000, percent: 0, width: "200px", height: "12px"});
var query = {};
var chunks = [];
if (!!file) {
var start = 0;
//文件分片
for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
//最后一段取文件的真实大小
var end = 0;
if(i == (Math.ceil(file.size / chunk)-1)){
end = file.size;
}else{
end = start + chunk;
}
chunks[i] = file.slice(start , end);
start = end;
}
// 采用post方法上传文件
// url query上拼接以下参数，用于记录上传偏移
// post body中存放本次要上传的二进制数据
query = {
fileName : file.name,
fileSize: file.size,
dataSize: chunk,
nextOffset: 0
}
upload(chunks, query, successPerUpload);
}
}
}
// 执行上传
function upload(chunks, query, cb) {
//对象转字符串 用&连接
var queryStr = Object.getOwnPropertyNames(query).map(key => {
return key + "=" + query[key];
}).join("&");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Shop/index.php/Admin/File/upload_file?" + queryStr);
xhr.overrideMimeType("application/octet-stream");
//获取post body中二进制数据
var index = Math.floor(query.nextOffset / query.dataSize);
getFileBinary(chunks[index], function (binary) {
if (xhr.sendAsBinary) {
xhr.sendAsBinary(binary);
} else {
xhr.send(binary);
}
});
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var resp = JSON.parse(xhr.responseText);
//通过返回数据更新进度条
var precent = Math.ceil((resp.offset / query.fileSize) * 100);
$("#progress").myProgress({speed: 1000, percent: precent, width: "200px", height: "12px"});
// 接口返回nextoffset
// resp = {
// isFinish:false,
// offset:100*1024
// }
if (typeof cb === "function") {
cb.call(this, resp, chunks, query)
}
}
}
}
}
// 每片上传成功后执行
function successPerUpload(resp, chunks, query) {
if (resp.isFinish === true) {
//上传完成给出提示
$('#help_msg').css('display','block').addClass('error-block').html('success!');
} else {
//未上传完毕
query.nextOffset = resp.offset;
upload(chunks, query, successPerUpload);
}
}
// 获取文件二进制数据
function getFileBinary(file, cb) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (e) {
if (typeof cb === "function") {
cb.call(this, this.result);
}
}
}
//初始化上传
initUpload();
//ajax模拟提交表单
$(function(){
$('#btn').click(function(){
var fd = new FormData(document.querySelector('#myForm'));
var input = document.getElementById("myFile"); //input file
var file = input.files[0];
if(!file){
$('#help_msg').css('display','block').addClass('error-block').html('please chose the file !');
return ;
}
fd.append('FileName',file.name);
fd.append('size',file.size);
$.ajax({
url : "/Shop/index.php/Admin/File/add",
type: "POST",
async : true,
data: fd,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success : function(result){
console.log(result);
if(result.res == 1){
window.location.href = "http://localhost:8080/Shop/index.php/Admin/File/index";
}else{
$("#help_msg_1").css('display','block').html('upload faild ' + $result.msg);
}
}
});
})
})
</script>
后台PHP代码
public function add(){
if($_POST){
$Attach = D('Attachment');
$file_path = './Upload/File/'.$_POST['FileName'];
//如果是win系统将文件名改成GBK编码
if(strtoupper(substr(PHP_OS, 0, 3)) === 'WIN'){
$file_path = iconv('UTF-8', 'GBK', $file_path);
}
if(file_exists($file_path)){
//获得拓展名
$ext = strtolower(trim(substr(strrchr($_POST['FileName'], '.'), 1)));
//生成新的文件名
$url = './Upload/File/'.date("Ymdhms").rand(1000,9999).'.'.$ext;
$_POST['url'] = $url ;
//将上传的文件改名，将新的路径存入数据库
if(rename($file_path, $url)){
$res = $Attach -> add_file($_POST);
if($res['res']){
$log['remark'] = session('userinfo')['name'].'在'.date("Y-m-d H:i:s").'上传了文件';
D('ActionLog') -> add_log($log);
$this -> ajaxReturn(array('res' => 1));
}else{
$this -> ajaxReturn(array('res' => 0 , 'msg' => $res['msg']));
}
}
}else{
$this -> ajaxReturn(array('res' => 0, 'msg' => '上传文件不存在'));
}
}else{
$this -> show();
}
}
//异步分段上传文件
public function upload_file(){
$path = './Upload/File/'.$_GET['fileName'];
if(strtoupper(substr(PHP_OS, 0, 3)) === 'WIN'){
$path = iconv('UTF-8', 'GBK', $path);
}
if(!file_exists($path)){
$handle = fopen($path, "a+");
fclose($handle);
}
file_put_contents($path, file_get_contents('php://input'),FILE_APPEND|LOCK_EX);
$offset = filesize($path);
if( $offset >= $_GET['fileSize'] ){
$this -> ajaxReturn(array('isFinish' => true));
}else{
$this -> ajaxReturn(array('isFinish' => false , 'offset' => $offset));
}
}
