江苏龙网

  1. 主页 > 生活百科 > >

java大文件分片上传、断点续传、急速秒传( 二 )

Java

【java大文件分片上传、断点续传、急速秒传】tool.js 工具
Tool = {/*** 空校验 null或""都返回true*/isEmpty: function (obj) {if ((typeof obj == 'string')) {return !obj || obj.replace(/s+/g, "") == ""} else {return (!obj || JSON.stringify(obj) === "{}" || obj.length === 0);}},/*** 非空校验*/isNotEmpty: function (obj) {return !this.isEmpty();},/*** 长度校验*/isLength: function (str, min, max) {return $.trim(str).length >= min && $.trim(str).length <= max;},/*** 时间格式化，date为空时取当前时间*/dateFormat: function (format, date) {let result;if (!date) {date = new Date();}const option = {"y+": date.getFullYear().toString(),// 年"M+": (date.getMonth() + 1).toString(),// 月"d+": date.getDate().toString(),// 日"h+": date.getHours().toString(),// 时"m+": date.getMinutes().toString(),// 分"s+": date.getSeconds().toString()// 秒};for (let i in option) {result = new RegExp("(" + i + ")").exec(format);if (result) {format = format.replace(result[1], (result[1].length == 1) ? (option[i]) : (option[i].padStart(result[1].length, "0")))}}return format;},/*** 移除对象数组中的对象* @param array* @param obj* @returns {number}*/removeObj: function (array, obj) {let index = -1;for (let i = 0; i < array.length; i++) {if (array[i] === obj) {array.splice(i, 1);index = i;break;}}return index;},/*** 10进制转62进制* @param number* @returns {string}* @private*/_10to62: function (number) {let chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ';let radix = chars.length;let arr = [];do {let mod = number % radix;number = (number - mod) / radix;arr.unshift(chars[mod]);} while (number);return arr.join('');}};index.html 上传页面
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="" th:src="@{/js/md5.js}"></script><script src="" th:src="@{/js/tool.js}"></script></head><body><button type="button" class="btn btn-default" onclick="selectImg()">文件上传</button><input class="hidden" multiple type="file" onchange="uploadImage()" id="file-upload-input"><table class="table table-bordered tinfo" style="display: none;"><thead><tr><th>文件名称</th><th>文件大小</th><th>上传进度</th></tr></thead><tbody id="upinfo"></tbody></table><div class="progress progress-striped active" style="display: none;"><div class="progress-bar progress-bar-success" role="progressbar"aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 40%;"><span class="sr-only">40% 完成</span></div></div><script>function selectImg() {$("#file-upload-input").trigger("click");}function uploadImage (){let file = document.getElementById("file-upload-input").files;for (let i=0;i<file.length;i++){let info = '<tr>n' +'<td>'+ file[i].name +'</td>n' +'<td>'+ parseFloat(file[i].size/1024/1024).toFixed(2)+"M" +'</td>n' +'<td class="index'+ i +'">'+ '进行中'+'</td>n' +'</tr>';$("#upinfo").append(info);$(".tinfo").css("display","block");multiple_upload(file[i],i);}}//多文件上传 file 文件信息curr 当前文件的索引function multiple_upload(file,curr) {// 文件分片var shardSize = 10 * 1024 * 1024; //以5MB为一个分片var shardIndex = 1;//分片索引，1表示第1个分片var size = file.size; // 文件大小var shardTotal = Math.ceil(size / shardSize); //总片数var suffix = file.name.substring(file.name.lastIndexOf(".")+1);//文件后缀// 生成文件标识，标识多次上传的是不是同一个文件var key = hex_md5(file.name+file.lastModified+file.lastModifiedDate+file.webkitRelativePath+file.size+file.type);var key10 = parseInt(key, 16);var key62 = Tool._10to62(key10);console.log("文件的唯一表示",file.name,key, key10, key62);var param = {'shardIndex': shardIndex,'shardSize': shardSize,'shardTotal': shardTotal,'use': "file",'name': file.name,'suffix': suffix,'size': file.size,'key': key62};//文件上传upload_file(param,file,curr);}// 文件上传到服务器function upload_file(param,file,curr) {// 将图片转为base64进行传输var fileReader = new FileReader();let fileShard = getFileShard(param.shardIndex, param.shardSize,file);let progress = parseInt((param.shardIndex - 1) * 100 / param.shardTotal);$(".index"+curr).html(progress+"%");fileReader.onload = function(e) {var base64 = e.target.result;console.log("base64:", base64);param.shard = base64;$.ajax({url: "/admin/upload",type: "POST",data: JSON.stringify(param),contentType: 'application/json',/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData: false,success: function (data) {if (param.shardIndex < param.shardTotal) {// 上传下一个分片param.shardIndex = param.shardIndex + 1;//大文件递归上传upload_file(param,file,curr);} else {$(".index"+curr).html("已完成");console.log("上传完成")}},error: function () {alert("上传失败！");}});};fileReader.readAsDataURL(fileShard);}//获取文件的分片function getFileShard (shardIndex, shardSize,file) {let start = (shardIndex - 1) * shardSize;//当前分片起始位置let end = Math.min(file.size, start + shardSize); //当前分片结束位置let fileShard = file.slice(start, end); //从文件中截取当前的分片数据return fileShard;}</script></body></html>


推荐阅读


上一篇：MyBatis 使用数组作为参数，这里藏着一个大坑

下一篇：如何设置Mac终端使用快捷键切换标签页？