html页面
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<form id="imgForm">
<input type="file" id="file" class="addBorder">
<br/>
<button type="button" onclick="loadImg()">获取图片</button>
</form>
<div class="addBorder" id="imgDiv">
<img id="imgContent" style="width: 500px; height: 500px;">
</div>
<script>
function loadImg(){
var blob = document.getElementById('file').files[0];
var size = blob.size;
var filename = blob.name;
var price_sex =1024*1024*2;
var index = 0;
var price_num = Math.ceil(size/price_sex);
var start=0;
var end;
while (start<size){
end = start+price_sex;
var chunk = blobSlice(blob,start,end);
var slice_index = blob.name+index;
var formData = new FormData();
formData.append('file',chunk,filename);
$.ajax({
type:'POST',
url:"mm.php",
cache:false,
data:formData,
processData : false,
contentType : false,
dataType:'json',
success:function (data) {
}
});
start = end;
index++;
}
}
function blobSlice(blob,startByte,endByte){
if(blob.slice){
return blob.slice(startByte,endByte);
}
if(blob.mozSlice){
return blob.mozSlice(startByte,endByte);
}
if(blob.webkitSlice){
return blob.webkitSlice(startByte,endByte);
}
return null;
}
</script>
</body>
</html>
PHP 处理
<?php
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$file = $_FILES['file'];
$filename = $file['name'];
var_dump($filename);
var_dump($file);
file_put_contents($filename, file_get_contents($file['tmp_name']), FILE_APPEND);