发布于：2020-05-15 17:08:42
<?php
/**
* Created by PhpStorm.
* User: wuyf
* Date: 2019/8/16
* Time: 上午10:38
*/
//储存分片
$tmp_dir = '../storage/upload/tmp_chunk/' . $_REQUEST['name'] . '/';
if (! is_dir($tmp_dir)) {
mkdir($tmp_dir, 0777, true);
}
move_uploaded_file($_FILES['file']['tmp_name'], $tmp_dir . $_REQUEST['chunk']);
//合并分片
if ($_REQUEST['chunk'] == $_REQUEST['chunks'] - 1) { //最后一个分片
$target_file = '../storage/upload/';
if (! is_dir($target_file)) {
mkdir($target_file, 0777, true);
}
$target_file .= $_REQUEST['name'];
$handle = fopen($target_file, 'x+');
for ($i=0; $i<$_REQUEST['chunks']; $i++) {
fwrite($handle, file_get_contents($tmp_dir . $i));
}
fclose($handle);
}
$msg = [
'$_FILES' => json_encode($_FILES),
'$_REQUEST' => json_encode($_REQUEST),
];
echo json_encode(['status' => 1, 'msg' => json_encode($msg)]);
————————————————
版权声明：本文为CSDN博主「十八胡笳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hyryysf/java/article/details/99733298<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="../static/js/webuploader-0.1.5/webuploader.css">
<title>Document</title>
</head>
<body>
<div id="uploader">
<!--用来存放文件信息-->
<div id="thelist"></div>
<div>
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</body>
</html>
<!--引入JS-->
<script src="../static/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../static/js/webuploader-0.1.5/webuploader.min.js"></script>
<script>
let uploader = new WebUploader.Uploader({
// swf文件路径
swf: '../static/js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'http://127.0.0.1/test/php/upload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 分片上传。
chunked: true,
chunkSize: 2 * 1024 * 1024,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
let $list = $('#thelist');
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '">' +
'<h4>' + file.name + '</h4>' +
'<p>等待上传...</p>' +
'</div>' );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
let $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
//开始上传
$('#ctlBtn').click(function () {
uploader.upload();
});
uploader.on( 'uploadSuccess', function( file, response ) {
if (response.status) {
$( '#'+file.id ).find('p.state').text('已上传');
} else {
$( '#'+file.id ).find('p.state').text(response.msg);
}
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
————————————————
版权声明：本文为CSDN博主「十八胡笳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hyryysf/java/article/details/99733298
阅读 86+
10
