JS异步文件分片断点上传的实现思路


Posted in Javascript onDecember 25, 2016

在项目中有时会遇到大文件上传,经常会出现链接超时的问题,所以就需要使用文件分片上传的方式来上传大文件。实现原理就是,在前端将文件分成指定大小的“文件块”,分成多次上传,每次上传前先向后台查询已经上传成功的文件的大小,然后从指定的位置切割一块文件,进行上传,后台接收到文件块后追加到指定的文件中。

这篇博客适合有一些后台基础的朋友,或者有后台配合的前端。

这里需要后台提供两个接口,一个上传文件的接口,一个查询已上传文件大小的接口。

JS异步文件分片断点上传的实现思路

前端代码:https://github.com/li5454yong/FileUpload.git

这里放上后台主要代码

package com.fs.controller;import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStream;
import java.io.RandomAccessFile;
import java.util.Iterator;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
import org.csource.ClientGlobal;
import org.csource.common.MyException;
import org.csource.fastdfs.FileInfo;
import org.csource.fastdfs.StorageClient;
import org.csource.fastdfs.TrackerClient;
import org.csource.fastdfs.TrackerServer;
import org.junit.Test;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisShardInfo;
import com.alibaba.fastjson.JSON;
import com.fs.entity.UploadedFileInfo;
import com.fs.util.UploadUtil;
/**
 * @author admin
 *
 * 2016年12月20日下午8:59:38
 */
@Controller
public class FastDFSUpLoadController {
 @Resource
 private UploadUtil uploadUtil;
 @RequestMapping(value = "v1/uploadSize", method = RequestMethod.POST)
 @ResponseBody
 public Long uploadSize(HttpServletRequest request) {
  String name = request.getParameter("name");
  Long size = Long.parseLong(request.getParameter("size"));
  try {
   JedisShardInfo jedisShardInfo = new JedisShardInfo("192.168.0.12");
   Jedis jedis = new Jedis(jedisShardInfo);
   String str = jedis.get(name);
   UploadedFileInfo uploadedFileInfo = null;
   // 如果首次上传,已上传大小为 0
   if (StringUtils.isEmpty(str)) {
    uploadedFileInfo = new UploadedFileInfo();
    jedis.set(name, JSON.toJSONString(uploadedFileInfo));
    jedis.close();
    return 0L;
   }
   uploadedFileInfo = JSON.parseObject(str, UploadedFileInfo.class);
   jedis.close();
   //已经全部上传
   if(size <= uploadedFileInfo.getSize()){
    System.out.println("上传完成");
   }
    //UploadUtil.getFileInfo(uploadedFileInfo.getFileId());
   return uploadedFileInfo.getSize();
  } catch (Exception e) {
   e.printStackTrace();
   return 0L;
  }
 }
 @RequestMapping(value = "v1/uploadFile", method = RequestMethod.POST)
 @ResponseBody
 public int upload(HttpServletRequest request) {
  // CommonsMultipartResolver resolver = new
  // CommonsMultipartResolver(request.getSession().getServletContext());
  MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
  Iterator<String> t = multiRequest.getFileNames();
  MultipartFile fileDetail = multiRequest.getFile(t.next());
  String name = request.getParameter("name");
  JedisShardInfo jedisShardInfo = new JedisShardInfo("192.168.0.12");
  Jedis jedis = new Jedis(jedisShardInfo);
  UploadedFileInfo uploadedFileInfo = JSON.parseObject(jedis.get(name), UploadedFileInfo.class);
  uploadedFileInfo.setFileName(name);
  String path = "d:/testUpload";
  File file = new File(path);
  if (!file.exists() && !file.isDirectory()) {
   boolean b = file.mkdirs();
  }
  RandomAccessFile randomFile = null;
  try {
   randomFile = new RandomAccessFile(path+"/"+name, "rw");
   randomFile.seek(randomFile.length());
   randomFile.write(fileDetail.getBytes());
   uploadedFileInfo.setLocalPath(path+"/"+name);
   uploadedFileInfo.setSize(randomFile.length());
  } catch (IOException e) {
   e.printStackTrace();
  }finally{
   try {
    randomFile.close();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
  // 将上传文件信息保存到redis
  jedis.set(name, JSON.toJSONString(uploadedFileInfo));
  jedis.close();
  return 0;
 }
}

以上所述是小编给大家介绍的JS异步文件分片断点上传的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
JS如何生成一个不重复的ID的函数
Dec 25 #Javascript
js Canvas实现的日历时钟案例分享
Dec 25 #Javascript
ES6概念 Symbol toString()方法
Dec 25 #Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 #Javascript
You might like
php获取文件名称和扩展名的方法
2017/02/07 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
微信小程序实现轮播图效果
2017/09/07 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
基于JS实现视频上传显示进度条
2020/05/12 Javascript
js实现查询商品案例
2020/07/22 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python利用Guetzli批量压缩图片
2017/03/23 Python
老生常谈python中的重载
2018/11/11 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
完美的中文自荐信
2014/05/24 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python