修改plupload，上传文件，支持断点，可上传超过2G

最新推荐文章于 2022-12-30 09:52:29 发布
最新推荐文章于 2022-12-30 09:52:29 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： java 文章标签： plupload 上传文件 支持断点 可上传超过2G
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gbguanbo/article/details/84547648
版权
一直在寻找一个能够上传4G以上文件，并且支持断点续传的插件，而且可以在多浏览器使用

最后发现plupload可以上传超4G，并且Silverlight,flash,html4,html5模式上传

Silverlight 安装微软的Silverlight

flash只要浏览器支持flash就行，但存在一个bug，文件超过4G时，选择文件后上传列表不响应，只能推拽进上传列表

html5浏览器支持

以上只需要存在一个即可上传

 

 

不废话，直接看代码，希望大家指教

找到plupload.dev.js

修改成如下：

onUploadFile

 

function onUploadFile(up, file) {

                       var url = up.settings.url, chunkSize = up.settings.chunk_size, retries = up.settings.max_retries, features = up.features, offset = 0, blob;

                       if (file.name != null) {

                               $.get("ckeck", {

                                      filename : file.name,

                                      chunk_size:up.settings.chunk_size,

                               }, function(data) {

 

                                      offset = data.off;

                               });

                       }
 


断点续传需要数据库的支持，因为是测试使用简单的JDBC操作数据库

package db;

import java.sql.*;

public class Database {

        private String dbDriver="com.mysql.jdbc.Driver";

 

         private String sConnStr = "jdbc:mysql://localhost:3306/upload?useUnicode=true&characterEncoding=UTF-8";

          public Connection connect = null;

          public ResultSet rs=null;

          public Database() {

            try {

            

              Class.forName(dbDriver).newInstance();

            

              connect = DriverManager.getConnection(sConnStr,"root","");

         

            }

            catch (Exception ex) {

              System.out.println("");

            }

          }

       

         

          public ResultSet executeQuery(String sql) {

                 System.out.println(sql);

                       try{

                               connect=DriverManager.getConnection(sConnStr,"root","");

                               Statement stmt=connect.createStatement();

                               rs=stmt.executeQuery(sql);

                              

                       }catch(SQLException ex){

                               System.err.println(ex.getMessage());

                       }

                       return rs;

               }

          public void executeUpdate(String sql)

            {

                 System.out.println(sql);

                Statement stmt=null;

                rs=null;

                try

                {   connect=DriverManager.getConnection(sConnStr,"root","");

                       stmt=connect.createStatement();

                       stmt.executeUpdate(sql);

                       stmt.close();

                       connect.close();

                      

               

                }

                catch(SQLException ex)

                {

                       System.err.println(ex.getMessage());

                      

                      

                }

           

               

            }

}
 


plupload是分块上传文件，记录文件上传到哪块，以便断点

package gson.demo;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.sql.ResultSet;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;

import db.Database;

public class UploaderServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    String repositoryPath;
    String uploadPath;

    @SuppressWarnings("unchecked")
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        Integer schunk = null;// 分割块数
        Integer schunks = null;// 总分割数
        String name = null;// 文件名
        BufferedOutputStream outputStream = null;
        if (ServletFileUpload.isMultipartContent(request)) {
            try {
                DiskFileItemFactory factory = new DiskFileItemFactory();
                factory.setSizeThreshold(1024);
                factory.setRepository(new File(repositoryPath));// 设置临时目录
                ServletFileUpload upload = new ServletFileUpload(factory);
                upload.setHeaderEncoding("UTF-8");
                upload.setSizeMax(5 * 1024 * 1024 * 1024);// 设置附近大小
                List<FileItem> items = upload.parseRequest(request);
                // 生成新文件名

                String newFileName = null;
                for (FileItem item : items) {
                    if (!item.isFormField()) {// 如果是文件类型
                        name = newFileName;// 获得文件名
                        if (name != null) {
                            String nFname = newFileName;
                            if (schunk != null) {
                                nFname = schunk + "_" + name;
                            }
                            File savedFile = new File(uploadPath, nFname);
                            item.write(savedFile);
                        }
                    } else {
                        // 判断是否带分割信息
                        if (item.getFieldName().equals("chunk")) {
                            schunk = Integer.parseInt(item.getString());
                            System.out.println(schunk);
                        }
                        if (item.getFieldName().equals("chunks")) {
                            schunks = Integer.parseInt(item.getString());
                        }

                        if (item.getFieldName().equals("name")) {
                            newFileName = item.getString();
                        }

                    }

                }
                Database db = new Database();
                if (schunk != null && schunk == 0) {
                    String ckcksql = "select * from file  where filename ='"
                            + newFileName + "'";
                    db.executeQuery(ckcksql);
                    if (db.rs.first()) {

                    } else {
                        String sql = "INSERT INTO file (filename,schunk,schunks)  VALUES ('"
                                + newFileName
                                + "',"
                                + schunk
                                + ","
                                + schunks
                                + ")";
                        db.executeUpdate(sql);
                    }
                } else {
                    String sql = "update  file  set schunk=" + schunk
                            + " where filename ='" + newFileName + "'";
                    db.executeUpdate(sql);
                }
                if (schunk != null && schunk + 1 == schunks) {
                    outputStream = new BufferedOutputStream(
                            new FileOutputStream(new File(uploadPath,
                                    newFileName)));
                    // 遍历文件合并
                    for (int i = 0; i < schunks; i++) {
                        File tempFile = new File(uploadPath, i + "_" + name);
                        byte[] bytes = FileUtils.readFileToByteArray(tempFile);
                        outputStream.write(bytes);
                        outputStream.flush();
                        tempFile.delete();
                    }
                    outputStream.flush();
                }
                response.getWriter()
                        .write("{\"status\":true,\"newName\":\"" + newFileName
                                + "\"}");
            } catch (FileUploadException e) {
                e.printStackTrace();
                response.getWriter().write("{\"status\":false}");
            } catch (Exception e) {
                e.printStackTrace();
                response.getWriter().write("{\"status\":false}");
            } finally {
                try {
                    if (outputStream != null)
                        outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    @Override
    public void init(ServletConfig config) throws ServletException {
        repositoryPath = FileUtils.getTempDirectoryPath();
        System.out.println("临时目录：" + repositoryPath);
        uploadPath = config.getServletContext().getRealPath(
                config.getInitParameter("uploadPath"));
        System.out.println("目录：" + uploadPath);
        File up = new File(uploadPath);
        if (!up.exists()) {
            up.mkdir();
        }
    }
}

 


 


上传之前检测文件是否上传过，注：修改文件后再上传未作处理，可获取文件大小存库，对比，如果大小改变，不再断点续传，重新上传

数据库设计（Mysql）

 

package gson.demo;

 

import java.io.File;

import java.io.IOException;

import java.sql.ResultSet;

import java.sql.SQLException;

 

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.commons.io.FileUtils;

 

import db.Database;

 

public class CkeckFileServlet extends HttpServlet {

        String repositoryPath;

        String uploadPath;

 

        @Override

        protected void doGet(HttpServletRequest req, HttpServletResponse resp)

                       throws ServletException, IOException {

               // TODO Auto-generated method stub

              

               String fileName=new String(req.getParameter("filename").getBytes("8859_1"),"utf-8");

               String chunk_size = req.getParameter("chunk_size");

               System.out.println(chunk_size);

               System.out.println(fileName);

               resp.setContentType("text/json; charset=utf-8");

               Database db = new Database();

               String sql = "select * from file where filename = '" + fileName+"'";

               ResultSet RS_result = db.executeQuery(sql);

               try {

                       if (db.rs.first()) {

                               int schunk = RS_result.getInt("schunk");
                                //删除最近一个分块，防止最后一个分块未上传之前被断开上传，一般不会发生
                                deleteFile(uploadPath+schunk+"_"+fileName);

                               long off = schunk  * Long.parseLong(chunk_size);

                               resp.getWriter().write("{\"off\":"+off+"}");

 

                       } else {

                               resp.getWriter().write("{\"off\":0}");

                       }

               } catch (SQLException e) {

                       // TODO Auto-generated catch block

                       e.printStackTrace();

               }

        }

 

        @Override

        protected void doPost(HttpServletRequest req, HttpServletResponse resp)

                       throws ServletException, IOException {

               // TODO Auto-generated method stub

               doGet(req, resp);

        }

 

        @Override

        public void init(ServletConfig config) throws ServletException {

               repositoryPath = FileUtils.getTempDirectoryPath();

               uploadPath = config.getServletContext().getRealPath(

                               config.getInitParameter("uploadPath"));

               File up = new File(uploadPath);

               if (!up.exists()) {

                       up.mkdir();

               }

        }

 

        public boolean deleteFile(String sPath) {

               boolean flag = false;

               File file = new File(sPath);

               // 路径为文件且不为空则进行删除

               if (file.isFile() && file.exists()) {

                       file.delete();

                       flag = true;

               }

               return flag;

        }

}
 

首页

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

        String path = request.getContextPath();

        String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";

%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>GodSon Easyui 结合Pluplaod插件的上传演示</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" href="bootstrap/easyui.css" type="text/css"></link>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript">

/**

 * 创建上传窗口 公共方法

 * @param chunk 是否分割大文件

 * @param callBack 上传成功之后的回调

 */

function Uploader(chunk,callBack){

        var addWin = $('<div style="overflow: hidden;"/>');

        var upladoer = $('<iframe/>');

        upladoer.attr({'src':'<%=basePath%>/uploader.jsp?chunk='+chunk,width:'100%',height:'100%',frameborder:'0',scrolling:'no'});

        addWin.window({

               title:"上传文件",

               height:350,

               width:550,

               minimizable:false,

               modal:true,

               collapsible:false,

               maximizable:false,

               resizable:false,

               content:upladoer,

               onClose:function(){

                       var fw = GetFrameWindow(upladoer[0]);

                       var files = fw.files;

                       $(this).window('destroy');

                       callBack.call(this,files);

               },

               onOpen:function(){

                       var target = $(this);

                       setTimeout(function(){

                               var fw = GetFrameWindow(upladoer[0]);

                               fw.target = target;

                       },100);

               }

        });

}

 

/**

 * 根据iframe对象获取iframe的window对象

 * @param frame

 * @returns {Boolean}

 */

function GetFrameWindow(frame){

        return frame && typeof(frame)=='object' && frame.tagName == 'IFRAME' && frame.contentWindow;

}

 

function makerUpload(chunk){

 Uploader(chunk,function(files){

         if(files && files.length>0){

                $("#res").text("成功上传："+files.join(","));

         }

 });

}

</script>

</head>

<body style="width: 100%;height: 100%;overflow:hidden;margin: 0;padding: 0;">

        <h1>GodSon Easyui 结合Pluplaod插件的上传演示</h1>

        <hr/>

        <a class="easyui-linkbutton" href="javascript:makerUpload(false)">不分割文件上传</a> <a class="easyui-linkbutton" href="javascript:makerUpload(true)">分割文件上传</a>

        <hr/>

        <div id="res"></div>

</body>

</html>
 

上传页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>文件上传</title>

    <link rel="stylesheet" href="plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css"></link>

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>

        <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script>

        <script type="text/javascript" src="plupload/js/i18n/Moxie.js"></script>

    <script type="text/javascript" src="plupload/js/i18n/zh_CN.js"></script>

    <script type="text/javascript" src="plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

  <body style="padding: 0;margin: 0;">

    <div id="uploader"> </div>

<script type="text/javascript">

var files = [];

var errors = [];

var type = 'file';

var chunk = eval('${param.chunk}');

var max_file_size = '9000mb';

var filters = {title : "文档", extensions : "zip,doc,docx,xls,xlsx,ppt,pptx"};

$("#uploader").pluploadQueue($.extend({

        runtimes : 'flash,html4,html5',

        url : 'uploader',

        max_file_size : max_file_size,

        file_data_name:'file',

        filters : [filters],

        // Flash settings

        flash_swf_url : '/plupload/plupload/js/Moxie.swf',

        // Silverlight settings

        silverlight_xap_url : '/plupload/plupload/js/Moxie.xap',

        init:{

               FileUploaded:function(uploader,file,response){

                       if(response.response){

                               var rs = $.parseJSON(response.response);

                               if(rs.status){

                                      files.push(file.name);

                               }else{

                                      errors.push(file.name);

                               }

                       }

               },

               UploadComplete:function(uploader,fs){

                       var e= errors.length ? ",失败"+errors.length+"个("+errors.join("、")+")。" : "。";

                       alert("上传完成！共"+fs.length+"个。成功"+files.length+e);

                       target.window("close");

               }

        }

},(chunk ? {chunk_size:'5mb'} : {})));

</script>

  </body>

</html>
 


除了上面说到的，修改文件之后上传未处理，还有一个中文乱码未处理，

 if (item.getFieldName().equals("name")) {

                            newFileName = item.getString();

                        }
 

修改编码

 

newFileName = new String(item.getString().getBytes("8859_1"),"utf-8");

 


对于修改文件之后，继续上传，在实际应用中我使用的是MD5对比，效果还不错

 

 

 

 

gbguanbo
关注
专栏目录
springboot整合plupload，实现文件批量上传、断点续传、秒传 源码
02-28
springboot2、plupload2.3.6整合，实现文件批量上传、断点续传、秒传，带进度条，idea、maven工程
plupload上传大文件
Mr_Zang666的博客
08-28 511
大容量文件上传早已不是什么新鲜问题，在.net 2.0时代，HTML5也还没有问世，要实现这样的功能，要么是改web.config，要么是用flash，要么是用一些第三方控件，然而这些解决问题的方法要么很麻烦，比如改配置，要么不稳定，比如文件上G以后，上传要么死掉，要么卡住，通过设置web.config并不能很好的解决这些问题。 这是一个Html5统治浏览器的时代，在这个新的时代，这种问题已被简...
上传组件Plupload 用Js修改上传文件大小上限
hello world
10-30 584
谁是凶手APP歌房的背景音乐只能上传少于10MB的文件： 看源码可以知道它是用的前端上传组件Plupload来做的上传 在console控制台输入下面这行命令即就可以改变文件大小上限了： uploader.setOption("filters",{ mime_types : [ {title : 'Audio Files', extensions : "mp3,aac,m4a,wav,ncm"} ], max_file_size : '20240kb', prevent_
plupload-中选定的文件数量限制
weixin_33695450的博客
07-27 777
2019独角兽企业重金招聘Python工程师标准>>> ...
plupload断点续传
roc08的专栏
06-10 973
[size=large][b]1. 简介[/b][/size] Plupload是不支持断点续传的，但是他支持分片上传，因此我们只需要打开其分片上传后，在文件上传之前请求一个服务器当前文件已上传的大小，如果上传大小为0则认为没有上传过，重新上传，如果上传文件大小大于0则从已上传的切片的下一个切片开始上传。 [b][size=large]2. 修改plupload[/size][/b] [...
spring boot + plupload实现大文件断点续传
10-18
结合plupload这样的前端文件上传库，可以实现大文件的断点续传功能，提升用户体验并确保文件传输的可靠性。下面我们将详细探讨如何使用Spring Boot和plupload实现这一功能。 首先，plupload是一款开源的多浏览器...
使用plupload自定义参数实现多文件上传
09-01
Plupload 是一个强大的多浏览器文件上传插件，它支持HTML5、Flash、Silverlight和HTML4等运行时环境。在本文中，我们将深入探讨如何利用Plupload实现自定义参数的多文件上传，这对于在Web应用中集成文件上传功能至关...
plupload上传视频文件
06-24
`plupload`是一个强大的JavaScript文件上传组件，它支持多种文件格式，包括视频文件，如`m4v`, `mpg`, `mp4`, `avi`, `mov`, `mk`, `wmv`等。这些格式都是视频文件的常见类型，每种都有其独特的特性和应用场景。 `...
plupload 限制上传数量 只能选择一张图片上传
06-14 1168
var files=[];var errors=[]; var chunk=<%=request.getParameter("chunk")%>; var root="",xml=""; var max_file_size='20MB'; var image='<%=request....
上传plupload的使用
江木
12-04 1673
plupload具体的使用
详解利用plupload突破HTTP上传限制
weixin_30627381的博客
12-03 300
plupload 是一款国外的上传开源组件，官方使用PHP作为服务器语言。这篇文章主要介绍plupload的在上传大文件方面的应用。 plupload支持技术： 1：Flash 2：Gears 3：HTML 5 4：Silverlight 5：BrowserPlus 6：HTML 4 plupload主要功能： 1：突破HTTP上传限制，可上传大文件，官方论坛中有讨论上传2G文件的应用。2...
SSM框架+Plupload实现分块上传（Spring+SpringMVC+MyBatis+Plupload）
黄复贵的博客
08-23 7828
关于Plupload的介绍，相信它的官网http://www.plupload.com/已经给得很详细了。Plupload的上传原理简单点说，就是将用户选中的文件（可多个）分隔成一个个小块，依次向服务器上传，这是它能驾驭上传大文件的原因之一，而且在这个过程可以暂停上传，暂停后再继续上传（异于断点续传）。最重要的是，从头到尾没有一点点UI阻塞，保证了用户体验。下面会开始讲Plupload的实现流程，分
vue中使用Plupload分片上传
最新发布
weixin_52484354的博客
12-30 1229
vue中使用Plupload分片上传
断点续传
路漫漫其修远兮，吾将上下而求索。
08-23 1875
关于Plupload的介绍，相信它的官网http://www.plupload.com/已经给得很详细了。Plupload的上传原理简单点说，就是将用户选中的文件（可多个）分隔成一个个小块，依次向服务器上传，这是它能驾驭上传大文件的原因之一，而且在这个过程可以暂停上传，暂停后再继续上传。最重要的是，从头到尾没有一点点UI阻塞，保证了用户体验。下面会开始讲Plupload的实现流程，分析原理，并在最
plupload实现多文件上传
qq_21223653的博客
07-05 1880
之前很早的项目，使用bootstrap+jsp，需要多文件上传，周末没事翻开记录一下： 首先看一下效果： 点击“选择文件”: 点击“添加文件”： 选择好文件之后如下图： 点击“开始上传”， 上传过程中还会有进度条提示，很不错的体验；而且可以实现文件拖拽上传； 虽然是前端的活，如果让专业前端来做，会做的更漂亮，但是很多项目没办法，技术人员都要前后都要涉及； 下面讲一下具体实现； 1、首先需要引入plupload的js文件： 下载地址： 链接：https://pan.baidu.com/s/1qRTg5
断点续传、支持超大文件(无需安装客户端插件)
我心中的成功方式：比别人做得更多，想的更多。
12-08 1437
首先声明，这不是一个理论性的文章，是经过的实践证明的，文章的结尾会附带demo,demo是比较简单的，没有经过封装，一看就懂   准备工作： plupload，版本应该是随意的，我使用的哪个版本也忘记了。 简单的介绍plupload，plupload就是一个在客户端进行了文件切割之后上传的javascript库，它有5种不同的上传技术，看浏览器的支持情况，或许会用html5、fllash之
php+plupload+sortable实现多图上传 大视频分片上传、断点续传、缩略图排序
qq_42686930的博客
08-05 1098
最近在研究做一个多图上传，大视频上传的功能，发现plupload插件比较符合要求，于是进行了简单研究，有什么不对的地方海王大家指正。 主要使用plupload.full.min.js、jquery.plupload.queue.js、jquery.plupload.queue.css、zh_CN.js、Sortable.jsTOC 1.页面部分 1.1上传成功后缩略图展示部分样式 <styl...
php七牛分片上传_plupload 大文件分片上传与PHP分片合并探索
weixin_39855706的博客
03-09 547
最近老大分给我了做一个电影cms系统，其中涉及到一个功能，使用七牛云的文件上传功能。七牛javascript skd，使用起来很方便，屏蔽了许多的技术细节。如果只满足与调用sdk，那么可能工作中也就没有什么收获了。其中对七牛云的服务很佩服的一点是，无论我上传多大的文件，当我文件最后一片上传完成的时候，就立刻返回到文件链接，这个问题我想了好久，也不知道七牛是如何做到的。七牛云的sdk分为 JavaS...
Plupload前端文件上传插件使用教程
"这篇文档是关于前端文件上传插件Plupload的使用教程，主要涵盖了前端部分的功能和配置，包括多种上传方式支持、上传进度、图片处理、多文件上传、拖拽上传、文件过滤以及分块上传等特性。文档强调了在实际项目中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值