利用XHR2上传文件

我们知道前端上传文件到服务器可以利用提交表单form的形式,后台比如php可以利用$_FILES数组接收文件信息。除了这种方式,我们前端也可以用xhr来提交文件二进制到服务器。代码如下:

html代码:

1
<input type="file" onchange="handleUpload()">

js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function handleUpload()
{
var file = document.querySelector('input[type=file]').files[0];
if(!!file) {
var reader = new FileReader();

// 读取文件二进制
reader.readAsArrayBuffer(file);
reader.onload = function() {
upload(this.result, file.name);
}
}
}

function upload(binary, filename)
{
var xhr = new XMLHttpRequest();

// 通过post发送二进制数据,文件信息拼接在url
xhr.open('POST', './upload.php?filename=' + filename);
xhr.overrideMimeType("application/octet-stream");

if(xhr.sendAsBinary) {
xhr.sendAsBinary(binary);
}else {
xhr.send(binary);
}

xhr.onload = function() {
var res = JSON.parse(xhr.response);
if(res.status === 'success') {
alert('上传成功');
}else {
alert('上传失败');
}
}
}

php代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php

$result = new stdClass();
$fileName = $_GET['filename'];
$filePath = './document/';

function binary_to_file($fileName)
{
// 获取二进制数据
$content = file_get_contents('php://input');
if(empty($content)) {
$content = $GLOBALS['HTTP_RAW_POST_DATA'];
}

$res = file_put_contents($GLOBALS['filePath'] . $fileName, $content, true);
return $res;
}

if(binary_to_file($fileName) === FALSE) {
$result->status = 'error';
}else {
$result->status = 'success';
}

echo json_encode($result);