// 设置分片的开始结尾 var blobFrom = chunk * eachSize, // 分段开始 blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾 percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分比 timeout = 5000, // 超时时间 fd = new FormData($('#myForm')[0]); fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的文件 fd.append('fileName', fileName); // 文件名 fd.append('totalSize', totalSize); // 文件总大小 fd.append('isLastChunk', isLastChunk); // 是否为末段 fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第一段（第一次上传） // 上传之前查询是否以及上传过分片 chunk = window.localStorage.getItem(fileName + '_chunk') || 0; chunk = parseInt(chunk, 10);
文件应该支持覆盖上传，所以如果文件以及上传完了，现在再上传，应该重置数据以支持覆盖（不然后端就直接追加blob数据了）
// 如果第一次上传就为末分片，即文件已经上传完成，则重新覆盖上传 if (times === 'first' && isLastChunk === 1) { window.localStorage.setItem(fileName + '_chunk', 0); chunk = 0; isLastChunk = 0; }
这个times其实就是个参数，因为要在上一分段传完之后再传下一分段，所以这里的做法是在回调中继续调用这个上传操作
接下来就是真正的文件上传操作了，用Ajax上传，因为用到了FormData对象，所以不要忘了在$.ajax({}加上这个配置processData: false
上传了一个分段，通过返回的结果判断是否上传完毕，是否继续上传
success: function(rs) { rs = JSON.parse(rs); // 上传成功 if (rs.status === 200) { // 记录已经上传的百分比 window.localStorage.setItem(fileName + '_p', percent); // 已经上传完毕 if (chunk === (chunks - 1)) { $progress.text(msg['done']); $this.val('已经上传').prop('disabled', true).css('cursor', 'not-allowed'); if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) { $('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed'); } } else { // 记录已经上传的分片 window.localStorage.setItem(fileName + '_chunk', ++chunk); $progress.text(msg['in'] + percent + '%'); // 这样设置可以暂停，但点击后动态的设置就暂停不了.. // if (chunk == 10) { // isPaused = 1; // } console.log(isPaused); if (!isPaused) { startUpload(); } } } // 上传失败，上传失败分很多种情况，具体按实际来设置 else if (rs.status === 500) { $progress.text(msg['failed']); } }, error: function() { $progress.text(msg['failed']); }
继续下一分段的上传时，就进行了递归操作，按顺序地上传下一分段
截个图..
这是完整的JS逻辑，代码有点儿注释了应该不难看懂吧哈哈
<script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> <script type="text/javascript"> // 全部上传操作 $(document).on('click', '#upload-all-btn', function() { // 未选择文件 if (!$('#myFile').val()) { $('#myFile').focus(); } // 模拟点击其他可上传的文件 else { $('#upload-list .upload-item-btn').each(function() { $(this).click(); }); } }); // 选择文件-显示文件信息 $('#myFile').change(function(e) { var file, uploadItem = [], uploadItemTpl = $('#file-upload-tpl').html(), size, percent, progress = '未上传', uploadVal = '开始上传'; for (var i = 0, j = this.files.length; i < j; ++i) { file = this.files[i]; percent = undefined; progress = '未上传'; uploadVal = '开始上传'; // 计算文件大小 size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size / (1024 * 1024)).toFixed(2) + 'MB' : (file.size / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; // 初始通过本地记录，判断该文件是否曾经上传过 percent = window.localStorage.getItem(file.name + '_p'); if (percent && percent !== '100.0') { progress = '已上传 ' + percent + '%'; uploadVal = '继续上传'; } // 更新文件信息列表 uploadItem.push(uploadItemTpl .replace(/{{fileName}}/g, file.name) .replace('{{fileType}}', file.type || file.name.match(/\.\w+$/) + '文件') .replace('{{fileSize}}', size) .replace('{{progress}}', progress) .replace('{{totalSize}}', file.size) .replace('{{uploadVal}}', uploadVal) ); } $('#upload-list').children('tbody').html(uploadItem.join('')) .end().show(); }); /** * 上传文件时，提取相应匹配的文件项 * @param {String} fileName 需要匹配的文件名 * @return {FileList} 匹配的文件项目 */ function findTheFile(fileName) { var files = $('#myFile')[0].files, theFile; for (var i = 0, j = files.length; i < j; ++i) { if (files[i].name === fileName) { theFile = files[i]; break; } } return theFile ? theFile : []; } // 上传文件 $(document).on('click', '.upload-item-btn', function() { var $this = $(this), state = $this.attr('data-state'), msg = { done: '上传成功', failed: '上传失败', in: '上传中...', paused: '暂停中...' }, fileName = $this.attr('data-name'), $progress = $this.closest('tr').find('.upload-progress'), eachSize = 1024, totalSize = $this.attr('data-size'), chunks = Math.ceil(totalSize / eachSize), percent, chunk, // 暂停上传操作 isPaused = 0; // 进行暂停上传操作 // 未实现，这里通过动态的设置isPaused值并不能阻止下方ajax请求的调用 if (state === 'uploading') { $this.val('继续上传').attr('data-state', 'paused'); $progress.text(msg['paused'] + percent + '%'); isPaused = 1; console.log('暂停：', isPaused); } // 进行开始/继续上传操作 else if (state === 'paused' || state === 'default') { $this.val('暂停上传').attr('data-state', 'uploading'); isPaused = 0; } // 第一次点击上传 startUpload('first'); // 上传操作 times: 第几次 function startUpload(times) { // 上传之前查询是否以及上传过分片 chunk = window.localStorage.getItem(fileName + '_chunk') || 0; chunk = parseInt(chunk, 10); // 判断是否为末分片 var isLastChunk = (chunk == (chunks - 1) ? 1 : 0); // 如果第一次上传就为末分片，即文件已经上传完成，则重新覆盖上传 if (times === 'first' && isLastChunk === 1) { window.localStorage.setItem(fileName + '_chunk', 0); chunk = 0; isLastChunk = 0; } // 设置分片的开始结尾 var blobFrom = chunk * eachSize, // 分段开始 blobTo = (chunk + 1) * eachSize > totalSize ? totalSize : (chunk + 1) * eachSize, // 分段结尾 percent = (100 * blobTo / totalSize).toFixed(1), // 已上传的百分比 timeout = 5000, // 超时时间 fd = new FormData($('#myForm')[0]); fd.append('theFile', findTheFile(fileName).slice(blobFrom, blobTo)); // 分好段的文件 fd.append('fileName', fileName); // 文件名 fd.append('totalSize', totalSize); // 文件总大小 fd.append('isLastChunk', isLastChunk); // 是否为末段 fd.append('isFirstUpload', times === 'first' ? 1 : 0); // 是否是第一段（第一次上传） // 上传 $.ajax({ type: 'post', url: '/fileTest.php', data: fd, processData: false, contentType: false, timeout: timeout, success: function(rs) { rs = JSON.parse(rs); // 上传成功 if (rs.status === 200) { // 记录已经上传的百分比 window.localStorage.setItem(fileName + '_p', percent); // 已经上传完毕 if (chunk === (chunks - 1)) { $progress.text(msg['done']); $this.val('已经上传').prop('disabled', true).css('cursor', 'not-allowed'); if (!$('#upload-list').find('.upload-item-btn:not(:disabled)').length) { $('#upload-all-btn').val('已经上传').prop('disabled', true).css('cursor', 'not-allowed'); } } else { // 记录已经上传的分片 window.localStorage.setItem(fileName + '_chunk', ++chunk); $progress.text(msg['in'] + percent + '%'); // 这样设置可以暂停，但点击后动态的设置就暂停不了.. // if (chunk == 10) { // isPaused = 1; // } console.log(isPaused); if (!isPaused) { startUpload(); } } } // 上传失败，上传失败分很多种情况，具体按实际来设置 else if (rs.status === 500) { $progress.text(msg['failed']); } }, error: function() { $progress.text(msg['failed']); } }); } }); </script>
2. 后端实现
这里的后端实现还是比较简单的，主要用依赖了 file_put_contents、file_get_contents 这两个方法
要注意一下，通过FormData对象上传的文件对象，在PHP中也是通过$_FILES全局对象获取的，还有为了避免上传后文件中文的乱码，用一下iconv
断点续传支持文件的覆盖，所以如果已经存在完整的文件，就将其删除