精华内容
下载资源
问答
  • 一.webuploader webuploader主要用来做文件的上传,支持批量上传和... webuploader上传原理 1. PHP+HTML表单上传文件 在讲这个之前,需要先了解一下php的文件上传方式,上传分两个部分 先通过html创建表单,在表单
  • 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传原理与实践。该博客重在实践。 一. ...

    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。

     

    一. Http协议原理简介 

        HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出。

        简单来说,就是一个基于应用层的通信规范:双方要进行通信,大家都要遵守一个规范,这个规范就是HTTP协议。

     1.特点:

      (1)支持客户/服务器模式。

      (2)简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。

      (3)灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

      (4)无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

      (5)无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

      注意:其中(4)(5)是面试中常用的面试题。虽然HTTP协议(应用层)是无连接,无状态的,但其所依赖的TCP协议(传输层)却是常连接、有状态的,而TCP协议(传输层)又依赖于IP协议(网络层)。

     2.HTTP消息的结构

     (1)Request 消息分为3部分,第一部分叫请求行, 第二部分叫http header消息头, 第三部分是body正文,header和body之间有个空行, 结构如下图

     (2)Response消息的结构, 和Request消息的结构基本一样。 同样也分为三部分,第一部分叫request line状态行, 第二部分叫request header消息体,第三部分是body正文, header和body之间也有个空行,  结构如下图

     

    下面是使用Fiddler捕捉请求baidu的Request消息机构和Response消息机构:

    因为没有输入任何表单信息,故request的消息正文为空,大家可以找一个登录的页面试试看。

    先到这里,HTTP协议的知识网上很丰富,在这里就不再熬述了。

     

    二. 文件上传的三种实现

    1. Jsp/servlet 实现文件上传

    这是最常见也是最简单的方式

    (1)实现文件上传的Jsp页面 

     

    (2)负责接文件的FileUploadServlet

    import java.io.File;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.io.InputStream;

    import javax.servlet.ServletException;

    import javax.servlet.http.HttpServlet;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.apache.log4j.Logger;

    // @WebServlet(name = "FileLoadServlet", urlPatterns = {"/fileload"})

    public class FileLoadServlet extends HttpServlet {

        private static Logger logger = Logger.getLogger(FileLoadServlet.class);

        private static final long serialVersionUID = 1302377908285976972L;

        @Override

        protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            logger.info("------------ FileLoadServlet ------------");

            if (request.getContentLength() > 0) {           

                   InputStream inputStream = null;

                   FileOutputStream outputStream = null;              

                try {               

                    inputStream = request.getInputStream();

                    // 给新文件拼上时间毫秒,防止重名

                    long now = System.currentTimeMillis();

                    File file = new File("c:/", "file-" + now + ".txt");

                    file.createNewFile();

                    outputStream = new FileOutputStream(file);

                      byte temp[] = new byte[1024];

                      int size = -1;

                      while ((size = inputStream.read(temp)) != -1) { // 每次读取1KB,直至读完

                          outputStream.write(temp, 0, size);

                      }               

                      logger.info("File load success.");

                  } catch (IOException e) {

                      logger.warn("File load fail.", e);

                      request.getRequestDispatcher("/fail.jsp").forward(request, response);

                  } finally {

                      outputStream.close();

                      inputStream.close();

                  }

              }       

              request.getRequestDispatcher("/succ.jsp").forward(request, response);

          }   

      }

    FileUploadServlet的配置,推荐采用servlet3.0注解的方式更方便

    <servlet>

        <servlet-name>FileLoadServlet</servlet-name>

        <servlet-class>com.juxinli.servlet.FileLoadServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>FileLoadServlet</servlet-name>

        <url-pattern>/fileload</url-pattern>

    </servlet-mapping>

     

    (3)运行效果

    点击"submit"

     

    页面转向文件上传成功的页面,再去C盘看看,发现多了一个文件:file-1433417127748.txt,这个就是刚上传的文件

     

     

    我们打开看看,发现和原来的文本有些不一样

                 

    结合前面讲的HTTP协议的消息结构,不难发现这些文本就是去掉"请求头"后的"Request消息体"。所以,如果要得到与上传文件一致的文本,还需要一些字符串操作,这些就留给大家了。

    另外,大家可以试试一个Jsp页面上传多个文件,会有不一样的精彩哦o(∩_∩)o ,不解释。

     

    2. 模拟Post请求/servlet 实现文件上传

    刚才我们是使用Jsp页面来上传文件,假如客户端不是webapp项目呢,显然刚才的那种方式有些捉襟见衬了。

    这里我们换种思路,既然页面上通过点击可以实现文件上传,为何不能通过HttpClient来模拟浏览器发送上传文件的请求呢。关于HttpClient ,大家可以自己去了解。

     (1)还是这个项目,启动servlet服务

     (2)模拟请求的FileLoadClient

    import java.io.BufferedReader;

    import java.io.File;

    import java.io.InputStream;

    import java.io.InputStreamReader;

    import org.apache.commons.httpclient.HttpClient;

    import org.apache.commons.httpclient.HttpStatus;

    import org.apache.commons.httpclient.methods.PostMethod;

    import org.apache.commons.httpclient.methods.multipart.FilePart;

    import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

    import org.apache.commons.httpclient.methods.multipart.Part;

    import org.apache.log4j.Logger;

    public class FileLoadClient {

        private static Logger logger = Logger.getLogger(FileLoadClient.class);

        public static String fileload(String url, File file) {

            String body = "{}";

            if (url == null || url.equals("")) {

                return "参数不合法";

            }

            if (!file.exists()) {

                return "要上传的文件名不存在";

            }

     

            PostMethod postMethod = new PostMethod(url);

            try {           

                // FilePart:用来上传文件的类,file即要上传的文件

                FilePart fp = new FilePart("file", file);

                Part[] parts = { fp };

                // 对于MIME类型的请求,httpclient建议全用MulitPartRequestEntity进行包装

                MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

                postMethod.setRequestEntity(mre);

                HttpClient client = new HttpClient();

                // 由于要上传的文件可能比较大 , 因此在此设置最大的连接超时时间

                client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

                int status = client.executeMethod(postMethod);

                if (status == HttpStatus.SC_OK) {

                    InputStream inputStream = postMethod.getResponseBodyAsStream();

                    BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                    StringBuffer stringBuffer = new StringBuffer();

                    String str = "";

                    while ((str = br.readLine()) != null) {

                        stringBuffer.append(str);

                    }               

                    body = stringBuffer.toString();               

                } else {

                    body = "fail";

                }

            } catch (Exception e) {

                logger.warn("上传文件异常", e);

            } finally {

                // 释放连接

                postMethod.releaseConnection();

            }        

            return body;

        }   

       

        public static void main(String[] args) throws Exception {

            String body = fileload("http://localhost:8080/jsp_upload-servlet/fileload", new File("C:/1111.txt"));

            System.out.println(body);

        }    

    }

     

    (3)在Eclipse中运行FileLoadClient程序来发送请求,运行结果:

    <html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h2>File upload success</h2><a href="index.jsp">return</a></body></html>

    打印了:文件上传成功的succ.jsp页面

     

     

    有没有发现什么,是不是和前面Jsp页面上传的结果类似?对的,还是去掉"请求头"后的"Request消息体"。 

    这种方式也很简单,负责接收文件的FileUploadServlet没有变,只要在客户端把文件读取到流中,然后模拟请求servlet就行了。

     3.模拟Post请求/Controller(SpringMvc)实现文件上传

     终于到第三种方式了,主要难点在于搭建maven+jetty+springmvc环境,接收文件的service和模拟请求的客户端 和上面相似。

     (1)模拟请求的FileLoadClient未变

    import java.io.BufferedReader;

    import java.io.File;

    import java.io.InputStream;

    import java.io.InputStreamReader;

    import org.apache.commons.httpclient.HttpClient;

    import org.apache.commons.httpclient.HttpStatus;

    import org.apache.commons.httpclient.methods.PostMethod;

    import org.apache.commons.httpclient.methods.multipart.FilePart;

    import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

    import org.apache.commons.httpclient.methods.multipart.Part;

    import org.apache.log4j.Logger;

    public class FileLoadClient {   

        private static Logger logger = Logger.getLogger(FileLoadClient.class);

        public static String fileload(String url, File file) {

            String body = "{}";       

            if (url == null || url.equals("")) {

                return "参数不合法";

            }

            if (!file.exists()) {

                return "要上传的文件名不存在";

            }

            PostMethod postMethod = new PostMethod(url);       

            try {           

                // FilePart:用来上传文件的类,file即要上传的文件

                FilePart fp = new FilePart("file", file);

                Part[] parts = { fp };

                // 对于MIME类型的请求,httpclient建议全用MulitPartRequestEntity进行包装

                MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

                postMethod.setRequestEntity(mre);

                HttpClient client = new HttpClient();

                // 由于要上传的文件可能比较大 , 因此在此设置最大的连接超时时间

                client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

                int status = client.executeMethod(postMethod);

                if (status == HttpStatus.SC_OK) {

                    InputStream inputStream = postMethod.getResponseBodyAsStream();

                    BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                    StringBuffer stringBuffer = new StringBuffer();

                    String str = "";

                    while ((str = br.readLine()) != null) {

                        stringBuffer.append(str);

                    }               

                    body = stringBuffer.toString();                

                } else {

                    body = "fail";

                }

            } catch (Exception e) {

                logger.warn("上传文件异常", e);

            } finally {

                // 释放连接

                postMethod.releaseConnection();

            }       

            return body;

        }   

        public static void main(String[] args) throws Exception {

            String body = fileload("http://localhost:8080/fileupload/upload", new File("C:/1111.txt"));

            System.out.println(body);

        }

    }

     

    (2)servlet换为springMvc中的Controller

    import java.io.File;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.io.InputStream;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.apache.log4j.Logger;

    import org.springframework.stereotype.Controller;

    import org.springframework.web.bind.annotation.RequestMapping;

    import org.springframework.web.bind.annotation.RequestMethod;

     

    @Controller

    @RequestMapping("/fileupload")

    public class FileUploadService {

        private Logger logger = Logger.getLogger(FileUploadService.class);

        @RequestMapping(consumes = "multipart/form-data", value = "/hello", method = RequestMethod.GET)

        public void hello(HttpServletRequest request, HttpServletResponse response) throws IOException {        

            response.getWriter().write("Hello, jetty server start ok.");

        }

        @RequestMapping(consumes = "multipart/form-data", value = "/upload", method = RequestMethod.POST)

        public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException {

            String result = "";

            if (request.getContentLength() > 0) {           

                   InputStream inputStream = null;

                   FileOutputStream outputStream = null;              

                try {

                    inputStream = request.getInputStream();

                    // 给新文件拼上时间毫秒,防止重名

                    long now = System.currentTimeMillis();

                    File file = new File("c:/", "file-" + now + ".txt");

                    file.createNewFile();

                    outputStream = new FileOutputStream(file);               

                    byte temp[] = new byte[1024];

                    int size = -1;

                    while ((size = inputStream.read(temp)) != -1) { // 每次读取1KB,直至读完

                        outputStream.write(temp, 0, size);

                    }

                    logger.info("File load success.");

                    result = "File load success.";

                } catch (IOException e) {

                    logger.warn("File load fail.", e);

                    result = "File load fail.";

                } finally {

                    outputStream.close();

                    inputStream.close();

                }

            }       

            response.getWriter().write(result);

        }

    }

     

     (3)启动jetty的核心代码,在Eclipse里面右键可以启动,也可以把项目打成jar报启动

    import org.apache.log4j.Logger;

    import org.eclipse.jetty.server.Connector;

    import org.eclipse.jetty.server.Server;

    import org.eclipse.jetty.server.ServerConnector;

    import org.eclipse.jetty.webapp.WebAppContext;

    public class Launcher

    {   

        private static Logger logger = Logger.getLogger(Launcher.class);

        private static final int PORT = 8080;

        private static final String WEBAPP = "src/main/webapp";

        private static final String CONTEXTPATH = "/";

        private static final String DESCRIPTOR = "src/main/webapp/WEB-INF/web.xml";

        /*

         * 创建 Jetty Server,指定其端口、web目录、根目录、web路径

         * @param port

         * @param webApp

         * @param contextPath

         * @param descriptor

         * @return Server

         */

        public static Server createServer(int port, String webApp, String contextPath, String descriptor) {

            Server server = new Server();

            //设置在JVM退出时关闭Jetty的钩子

            //这样就可以在整个功能测试时启动一次Jetty,然后让它在JVM退出时自动关闭

            server.setStopAtShutdown(true);

            ServerConnector connector = new ServerConnector(server);

            connector.setPort(port);

            //解决Windows下重复启动Jetty不报告端口冲突的问题

            //在Windows下有个Windows + Sun的connector实现的问题,reuseAddress=true时重复启动同一个端口的Jetty不会报错

            //所以必须设为false,代价是若上次退出不干净(比如有TIME_WAIT),会导致新的Jetty不能启动,但权衡之下还是应该设为False

            connector.setReuseAddress(false);

            server.setConnectors(new Connector[]{connector});

            WebAppContext webContext = new WebAppContext(webApp, contextPath);

            webContext.setDescriptor(descriptor);

            // 设置webapp的位置

            webContext.setResourceBase(webApp);

            webContext.setClassLoader(Thread.currentThread().getContextClassLoader());

            server.setHandler(webContext);       

            return server;

        }

        /**

         * 启动jetty服务

         */

        public void startJetty() {

            final Server server = Launcher.createServer(PORT, WEBAPP, CONTEXTPATH, DESCRIPTOR);

            try {

                server.start();

                server.join();           

            } catch (Exception e) {

                logger.warn("启动 jetty server 失败", e);

                System.exit(-1);

            }

        }

     

        public static void main(String[] args) {       

            (new Launcher()).startJetty();

            // jetty 启动后的测试url

            // http://localhost:8080/fileupload/hello

        }   

    }

    springMvc的配置不贴了,大家可以下载源码下来看。

     

    (4)运行效果

    上传包含1W个文件的文件夹,正常

     

    大型文件续传功能正常 。

     

    文件批量上传正常

     

    服务器中已经根据日期+GUID生成了目录

    数据库中也有记录

     

    后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

    欢迎入群一起讨论:374992201

    展开全文
  • webuploader 大文件上传

    2019-05-06 17:50:16
    最近项目遇到大文件上传出现超时情况,Google了下发现百度旗下提供了webuploader(官网:http://fex.baidu.com/webuploader/ )文件上传插件很不错。采用大文件切割上传的方法。原理就是把大文件切割用多线程上传,...

    最近项目遇到大文件上传出现超时情况,Google了下发现百度旗下提供了webuploader(官网:http://fex.baidu.com/webuploader/ )文件上传插件很不错。采用大文件切割上传的方法。原理就是把大文件切割用多线程上传,然后后台进行文件合并,很方便。下面说实现过程。参考过网上前辈的一些经验再结合自己的实际。下面直接贴代码

    1、简单的文件上传

    1. 前端页面
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="../js/webuploader.css"  ></link>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/webuploader.js"></script>
    </head>
    
    <body>
    <!-- 2.创建页面元素 -->
    <div id="upload">
        <div id="thelist" class="uploader-list"></div>
        <div id="filePicker">文件上传</div>
    </div>
    <!-- 3.添加js代码 -->
    <script type="text/javascript">
        var fileArray = [];
        var guid = WebUploader.Base.guid();
        var uploader = WebUploader.create(
            {
                swf:"../js/Uploader.swf",
                server:"/file/saveUpload",
                pick:"#filePicker",
                auto:true,  // 分块上传设置
                // 是否分块
                chunked:true,
                // 每块文件大小(默认5M)
                chunkSize:5*1024*1024,
                // 开启几个并非线程(默认3个)
                threads:3,
                // 在上传当前文件时,准备好下一个文件
                prepareNextFile:true,
                formData:{"guid":guid}
            }
        );
    
        //点击上传之前调用的方法
        uploader.on("uploadStart", function (file) {
            var paramOb = {"guid": guid, "filedId": file.source.ruid}
            uploader.options.formData.guid = guid;
            fileArray.push(paramOb);
        });
    
    
    
        //文件成功、失败处理
        uploader.on('uploadSuccess', function (file) {
    //        var successDuid = file.source.ruid;
            var chunks = file.blocks.length;
            var realFileName = file.name;
            var folder = file.id;
    
            $.post("/file/merge", {"guid": guid,"chunks":chunks,"realFileName":realFileName,"folder":folder}, function (data, status) {
                alert("文件上传成功!")
            });
    
        });
    
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
    
    </script>
    </body>
    </html>
    
    1. 后端代码
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.stereotype.Controller;
    import org.springframework.util.MultiValueMap;
    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 java.io.*;
    import java.util.Map;
    
    @Slf4j
    @Controller
    @RequestMapping(value = "/file")
    public class BigFileController {
    
    
        @RequestMapping(value = "/upload", method = RequestMethod.GET)
        public String upload(Map<String, Object> model) {
            return "upload";
        }
        @RequestMapping(value = "/uploadSimple", method = RequestMethod.GET)
        public String uploadSimple(Map<String, Object> model) {
            return "uploadSimple";
        }
    
    
        @RequestMapping(value = "saveUpload")
        @ResponseBody
        public void upload(MultipartHttpServletRequest request) {
    
            String guid = request.getParameter("guid");
            MultiValueMap<String, MultipartFile> multiFileMap = request.getMultiFileMap();
    
            MultipartFile multipartFile = multiFileMap.getFirst("file");
            try {
                InputStream in = multipartFile.getInputStream();
    
                String chunk = request.getParameter("chunk")==null?"0":request.getParameter("chunk");
                String path = "D:\\bigFile" + File.separator + request.getParameter("id")+File.separator+guid;
                File exist = new File(path);
                if (!exist.exists()) {
                    exist.mkdirs();
                }
                OutputStream out = new FileOutputStream(path + File.separator + chunk + "_" + request.getParameter("name"));
                byte[] bytes = new byte[1024];
                int len = -1;
    
                while ((len = in.read(bytes)) != -1) {
                    out.write(bytes, 0, len);
                }
                out.close();
                in.close();
    
    
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 文件合并
         * @param guid
         * @param realFileName
         * @param chunks
         * @param folder
         */
        @RequestMapping(value = "merge",method = RequestMethod.POST)
        @ResponseBody
        public void merge(String guid,String realFileName,int chunks,String folder ) {
    
    
            String path = "D:\\bigFile"+File.separator+folder+File.separator+guid;
            try {
                FileOutputStream  fileOutputStream = new FileOutputStream(path+File.separator+realFileName);
                byte[] buf = new byte[1024];
                for(int i=0;i<chunks;i++){
                    File tempFile = new File(path+File.separator+i+"_"+realFileName);
                    InputStream inputStream = new FileInputStream(tempFile);
                    int len = 0;
                    while((len=inputStream.read(buf))!=-1){
                        fileOutputStream.write(buf,0,len);
                    }
                    inputStream.close();
                    //删除临时文件
    				tempFile.delete();
                }
    
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
    
        }
    
    }
    
    1. 页面效果
      在这里插入图片描述

    2、完善的文件上传

    2.1. 前端页面

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="../js/webuploader.css"  ></link>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/webuploader.js"></script>
    </head>
    
    <body>
    <!-- 2.创建页面元素 -->
    <div id="uploader" class="wu-example">
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="filePicker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
    <!-- 3.添加js代码 -->
    <script type="text/javascript">
        var fileArray = [];
        var guid = WebUploader.Base.guid();
        var $list = $("#thelist");
        var $btn = $("#ctlBtn");
        var timer;
        var state = 'pending'; // 上传文件初始化
        var uploader = WebUploader.create({
    
            // swf文件路径
            swf:"../js/Uploader.swf",
    
            // 文件接收服务端。
            server:"/file/saveUpload",
    
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: '#filePicker',
    
            // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
            resize: false,
            chunked:true,
            duplicate: true,
    //         每块文件大小(默认5M)
                chunkSize:5*1024*1024,
                // 开启几个并非线程(默认3个)
                threads:3,
                // 在上传当前文件时,准备好下一个文件
                prepareNextFile:true,
                formData:{"guid":guid}
        });
        // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });
    
        //点击上传之前调用的方法
        uploader.on("uploadStart", function (file) {
            var paramOb = {"guid": guid, "filedId": file.source.ruid}
            uploader.options.formData.guid = guid;
            fileArray.push(paramOb);
        });
    
        // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');
    
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }
    
            $li.find('p.state').text('上传中');
    
            $percent.css( 'width', percentage * 100 + '%' );
        });
    
    
        //文件成功、失败处理
        uploader.on('uploadSuccess', function (file) {
    //        var successDuid = file.source.ruid;
            var chunks = file.blocks.length;
            var realFileName = file.name;
            var folder = file.id;
            clearInterval(timer);
            $.post("/file/merge", {"guid": guid,"chunks":chunks,"realFileName":realFileName,"folder":folder}, function (data, status) {
    //            alert("文件上传成功!")
            });
            $( '#'+file.id ).find('p.state').text('已上传');
        });
    
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });
    
        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
                timer = setInterval(function () {
                    var useTime = parseInt($("#useTime").html());
                    useTime = useTime + 1;
                    $("#useTime").html(useTime);
                }, 1000);
            }
        });
    
    
    </script>
    </body>
    </html>
    

    2.2.后端代码

    import lombok.extern.slf4j.Slf4j;
    import org.springframework.stereotype.Controller;
    import org.springframework.util.MultiValueMap;
    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 java.io.*;
    import java.util.Map;
    
    @Slf4j
    @Controller
    @RequestMapping(value = "/file")
    public class BigFileController {
    
    
        @RequestMapping(value = "/upload", method = RequestMethod.GET)
        public String upload(Map<String, Object> model) {
            return "upload";
        }
        @RequestMapping(value = "/uploadSimple", method = RequestMethod.GET)
        public String uploadSimple(Map<String, Object> model) {
            return "uploadSimple";
        }
    
    
        @RequestMapping(value = "saveUpload")
        @ResponseBody
        public void upload(MultipartHttpServletRequest request) {
    
            String guid = request.getParameter("guid");
            MultiValueMap<String, MultipartFile> multiFileMap = request.getMultiFileMap();
    
            MultipartFile multipartFile = multiFileMap.getFirst("file");
            try {
                InputStream in = multipartFile.getInputStream();
    
                String chunk = request.getParameter("chunk")==null?"0":request.getParameter("chunk");
                String path = "D:\\bigFile" + File.separator + request.getParameter("id")+File.separator+guid;
                File exist = new File(path);
                if (!exist.exists()) {
                    exist.mkdirs();
                }
                OutputStream out = new FileOutputStream(path + File.separator + chunk + "_" + request.getParameter("name"));
                byte[] bytes = new byte[1024];
                int len = -1;
    
                while ((len = in.read(bytes)) != -1) {
                    out.write(bytes, 0, len);
                }
                out.close();
                in.close();
    
    
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 文件合并
         * @param guid
         * @param realFileName
         * @param chunks
         * @param folder
         */
        @RequestMapping(value = "merge",method = RequestMethod.POST)
        @ResponseBody
        public void merge(String guid,String realFileName,int chunks,String folder ) {
    
    
            String path = "D:\\bigFile"+File.separator+folder+File.separator+guid;
            try {
                FileOutputStream  fileOutputStream = new FileOutputStream(path+File.separator+realFileName);
                byte[] buf = new byte[1024];
                for(int i=0;i<chunks;i++){
                    File tempFile = new File(path+File.separator+i+"_"+realFileName);
                    InputStream inputStream = new FileInputStream(tempFile);
                    int len = 0;
                    while((len=inputStream.read(buf))!=-1){
                        fileOutputStream.write(buf,0,len);
                    }
                    inputStream.close();
                    //删除临时文件
    				tempFile.delete();
                }
    
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
    
        }
    
    }
    
    

    2.3.展示效果
    在这里插入图片描述
    注意:如果进度条不显示,很多情况下应该是样式的问题。覆盖下webuploader.css的样式即可。
    webuploader.css样式代码如下

    .webuploader-container {
    	position: relative;
    }
    .webuploader-element-invisible {
    	position: absolute !important;
    	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    	clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
    	position: relative;
    /display: inline-block;/
    cursor: pointer;
    	background: #047a0a;
    	padding: 5px 8px;
    	color: #fff;
    	text-align: center;
    	border-radius: 3px;
    	overflow: hidden;
    }
    .webuploader-pick-hover {
    	background: #047a0a;
    }
    
    .webuploader-pick-disable {
    	opacity: 0.6;
    	pointer-events:none;
    }
    
    /**/
    element.style {
    	opacity: 0;
    	width: 100%;
    	height: 100%;
    	display: block;
    	cursor: pointer;
    	background: rgb(255, 255, 255);
    }
    picker {
    	display: inline-block;
    	line-height: 1.428571429;
    	position: relative;
    	top: 12px;
    }
    .wu-example {
    	position: relative;
    	padding: 45px 15px 15px;
    	margin: 15px 0;
    	background-color: #fafafa;
    	box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
    	border-color: #e5e5e5 #eee #eee;
    	border-style: solid;
    	border-width: 1px 0;
    }
    .wu-example:after {
    	content: "示例";
    	position: absolute;
    	top: 15px;
    	left: 15px;
    	font-size: 12px;
    	font-weight: bold;
    	color: #bbb;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    }
    .uploader-list {
    	width: 100%;
    	overflow: hidden;
    }
    .file-item {
    	float: left;
    	position: relative;
    	margin: 0 20px 20px 0;
    	padding: 4px;
    }
    .file-item .error {
    	position: absolute;
    	top: 4px;
    	left: 4px;
    	right: 4px;
    	background: red;
    	color: white;
    	text-align: center;
    	height: 20px;
    	font-size: 14px;
    	line-height: 23px;
    }
    .file-item .info {
    	position: absolute;
    	left: 4px;
    	bottom: 4px;
    	right: 4px;
    	height: 20px;
    	line-height: 20px;
    	text-indent: 5px;
    	background: rgba(0, 0, 0, 0.6);
    	color: white;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow : ellipsis;
    	font-size: 12px;
    	z-index: 10;
    }
    .upload-state-done:after {
    	content:"示例";
    	font-family: FontAwesome;
    	font-style: normal;
    	font-weight: normal;
    	line-height: 1;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    	font-size: 32px;
    	position: absolute;
    	bottom: 0;
    	right: 4px;
    	color: #4cae4c;
    	z-index: 99;
    }
    .file-item .progress {
    	position: absolute;
    	right: 4px;
    	bottom: 4px;
    	height: 3px;
    	left: 4px;
    	height: 4px;
    	overflow: hidden;
    	z-index: 15;
    	margin:0;
    	padding: 0;
    	border-radius: 0;
    	background: transparent;
    }
    
    .file-item .progress span {
    	display: block;
    	overflow: hidden;
    	width: 0;
    	height: 100%;
    	background: #d14 url(progress.png) repeat-x;
    	-webit-transition: width 200ms linear;
    	-moz-transition: width 200ms linear;
    	-o-transition: width 200ms linear;
    	-ms-transition: width 200ms linear;
    	transition: width 200ms linear;
    	-webkit-animation: progressmove 2s linear infinite;
    	-moz-animation: progressmove 2s linear infinite;
    	-o-animation: progressmove 2s linear infinite;
    	-ms-animation: progressmove 2s linear infinite;
    	animation: progressmove 2s linear infinite;
    	-webkit-transform: translateZ(0);
    }
    @-webkit-keyframes progressmove {
    	0% {
    		background-position: 0 0;
    	}
    	100% {
    		background-position: 17px 0;
    	}
    }
    @-moz-keyframes progressmove {
    	0% {
    		background-position: 0 0;
    	}
    	100% {
    		background-position: 17px 0;
    	}
    }
    @keyframes progressmove {
    	0% {
    		background-position: 0 0;
    	}
    	100% {
    		background-position: 17px 0;
    	}
    }
    .progress {
    	height: 20px;
    	margin-bottom: 20px;
    	overflow: hidden;
    	background-color: #f5f5f5;
    	border-radius: 4px;
    	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    }
    .progress.active .progress-bar {
    	-webkit-animation: progress-bar-stripes 2s linear infinite;
    	animation: progress-bar-stripes 2s linear infinite;
    }
    
    .progress-striped .progress-bar {
    	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    	background-size: 40px 40px;
    }
    .progress-bar {
    	background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
    	background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
    	background-repeat: repeat-x;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
    }
    .progress-bar {
    	float: left;
    	height: 100%;
    	font-size: 12px;
    	line-height: 20px;
    	color: #fff;
    	text-align: center;
    	background-color: #428bca;
    	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    	transition: width .6s ease;
    }
    .btn-default {
    	text-shadow: 0 1px 0 #fff;
    	background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    	background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
    	background-repeat: repeat-x;
    }
    .btn {
    	display: inline-block;
    	padding: 6px 12px;
    	margin-bottom: 0;
    	font-size: 14px;
    	font-weight: normal;
    	line-height: 1.428571429;
    	text-align: center;
    	white-space: nowrap;
    	vertical-align: middle;
    	cursor: pointer;
    	border: 1px solid transparent;
    	border-radius: 4px;
    	user-select: none;
    }
    

    在这里插入图片描述

    展开全文
  • 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传原理与实践。该博客重在实践。 一. ...

    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传的原理与实践。该博客重在实践。

     

    一. Http协议原理简介 

        HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版,HTTP/1.1的规范化工作正在进行之中,而且HTTP-NG(Next Generation of HTTP)的建议已经提出。

        简单来说,就是一个基于应用层的通信规范:双方要进行通信,大家都要遵守一个规范,这个规范就是HTTP协议。

     1.特点:

      (1)支持客户/服务器模式。

      (2)简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。

      (3)灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

      (4)无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。

      (5)无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。

      注意:其中(4)(5)是面试中常用的面试题。虽然HTTP协议(应用层)是无连接,无状态的,但其所依赖的TCP协议(传输层)却是常连接、有状态的,而TCP协议(传输层)又依赖于IP协议(网络层)。

     2.HTTP消息的结构

     (1)Request 消息分为3部分,第一部分叫请求行, 第二部分叫http header消息头, 第三部分是body正文,header和body之间有个空行, 结构如下图

     (2)Response消息的结构, 和Request消息的结构基本一样。 同样也分为三部分,第一部分叫request line状态行, 第二部分叫request header消息体,第三部分是body正文, header和body之间也有个空行,  结构如下图

     

    下面是使用Fiddler捕捉请求baidu的Request消息机构和Response消息机构:

    因为没有输入任何表单信息,故request的消息正文为空,大家可以找一个登录的页面试试看。

    先到这里,HTTP协议的知识网上很丰富,在这里就不再熬述了。

     

    二. 文件上传的三种实现

    1. Jsp/servlet 实现文件上传

    这是最常见也是最简单的方式

    (1)实现文件上传的Jsp页面 

    (2)负责接文件的FileUploadServlet

    import java.io.File;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.io.InputStream;

    import javax.servlet.ServletException;

    import javax.servlet.http.HttpServlet;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.apache.log4j.Logger;

    // @WebServlet(name = "FileLoadServlet", urlPatterns = {"/fileload"})

    public class FileLoadServlet extends HttpServlet {

        private static Logger logger = Logger.getLogger(FileLoadServlet.class);

        private static final long serialVersionUID = 1302377908285976972L;

        @Override

        protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            logger.info("------------ FileLoadServlet ------------");

            if (request.getContentLength() > 0) {           

                   InputStream inputStream = null;

                   FileOutputStream outputStream = null;              

                try {               

                    inputStream = request.getInputStream();

                    // 给新文件拼上时间毫秒,防止重名

                    long now = System.currentTimeMillis();

                    File file = new File("c:/", "file-" + now + ".txt");

                    file.createNewFile();

                    outputStream = new FileOutputStream(file);

                      byte temp[] = new byte[1024];

                      int size = -1;

                      while ((size = inputStream.read(temp)) != -1) { // 每次读取1KB,直至读完

                          outputStream.write(temp, 0, size);

                      }               

                      logger.info("File load success.");

                  } catch (IOException e) {

                      logger.warn("File load fail.", e);

                      request.getRequestDispatcher("/fail.jsp").forward(request, response);

                  } finally {

                      outputStream.close();

                      inputStream.close();

                  }

              }       

              request.getRequestDispatcher("/succ.jsp").forward(request, response);

          }   

      }

    FileUploadServlet的配置,推荐采用servlet3.0注解的方式更方便

    <servlet>

        <servlet-name>FileLoadServlet</servlet-name>

        <servlet-class>com.juxinli.servlet.FileLoadServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>FileLoadServlet</servlet-name>

        <url-pattern>/fileload</url-pattern>

    </servlet-mapping>

     

    (3)运行效果

    点击"submit"

    页面转向文件上传成功的页面,再去C盘看看,发现多了一个文件:file-1433417127748.txt,这个就是刚上传的文件

     

    我们打开看看,发现和原来的文本有些不一样

                 

    结合前面讲的HTTP协议的消息结构,不难发现这些文本就是去掉"请求头"后的"Request消息体"。所以,如果要得到与上传文件一致的文本,还需要一些字符串操作,这些就留给大家了。

    另外,大家可以试试一个Jsp页面上传多个文件,会有不一样的精彩哦o(∩_∩)o ,不解释。

     

    2. 模拟Post请求/servlet 实现文件上传

    刚才我们是使用Jsp页面来上传文件,假如客户端不是webapp项目呢,显然刚才的那种方式有些捉襟见衬了。

    这里我们换种思路,既然页面上通过点击可以实现文件上传,为何不能通过HttpClient来模拟浏览器发送上传文件的请求呢。关于HttpClient ,大家可以自己去了解。

     (1)还是这个项目,启动servlet服务

     (2)模拟请求的FileLoadClient

    import java.io.BufferedReader;

    import java.io.File;

    import java.io.InputStream;

    import java.io.InputStreamReader;

    import org.apache.commons.httpclient.HttpClient;

    import org.apache.commons.httpclient.HttpStatus;

    import org.apache.commons.httpclient.methods.PostMethod;

    import org.apache.commons.httpclient.methods.multipart.FilePart;

    import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

    import org.apache.commons.httpclient.methods.multipart.Part;

    import org.apache.log4j.Logger;

    public class FileLoadClient {

        private static Logger logger = Logger.getLogger(FileLoadClient.class);

        public static String fileload(String url, File file) {

            String body = "{}";

            if (url == null || url.equals("")) {

                return "参数不合法";

            }

            if (!file.exists()) {

                return "要上传的文件名不存在";

            }

     

            PostMethod postMethod = new PostMethod(url);

            try {           

                // FilePart:用来上传文件的类,file即要上传的文件

                FilePart fp = new FilePart("file", file);

                Part[] parts = { fp };

                // 对于MIME类型的请求,httpclient建议全用MulitPartRequestEntity进行包装

                MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

                postMethod.setRequestEntity(mre);

                HttpClient client = new HttpClient();

                // 由于要上传的文件可能比较大 , 因此在此设置最大的连接超时时间

                client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

                int status = client.executeMethod(postMethod);

                if (status == HttpStatus.SC_OK) {

                    InputStream inputStream = postMethod.getResponseBodyAsStream();

                    BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                    StringBuffer stringBuffer = new StringBuffer();

                    String str = "";

                    while ((str = br.readLine()) != null) {

                        stringBuffer.append(str);

                    }               

                    body = stringBuffer.toString();               

                } else {

                    body = "fail";

                }

            } catch (Exception e) {

                logger.warn("上传文件异常", e);

            } finally {

                // 释放连接

                postMethod.releaseConnection();

            }        

            return body;

        }   

       

        public static void main(String[] args) throws Exception {

            String body = fileload("http://localhost:8080/jsp_upload-servlet/fileload", new File("C:/1111.txt"));

            System.out.println(body);

        }    

    }

     

    (3)在Eclipse中运行FileLoadClient程序来发送请求,运行结果:

    <html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h2>File upload success</h2><a href="index.jsp">return</a></body></html>

    打印了:文件上传成功的succ.jsp页面

     

    有没有发现什么,是不是和前面Jsp页面上传的结果类似?对的,还是去掉"请求头"后的"Request消息体"。 

    这种方式也很简单,负责接收文件的FileUploadServlet没有变,只要在客户端把文件读取到流中,然后模拟请求servlet就行了。

     3.模拟Post请求/Controller(SpringMvc)实现文件上传

     终于到第三种方式了,主要难点在于搭建maven+jetty+springmvc环境,接收文件的service和模拟请求的客户端 和上面相似。

     (1)模拟请求的FileLoadClient未变

    import java.io.BufferedReader;

    import java.io.File;

    import java.io.InputStream;

    import java.io.InputStreamReader;

    import org.apache.commons.httpclient.HttpClient;

    import org.apache.commons.httpclient.HttpStatus;

    import org.apache.commons.httpclient.methods.PostMethod;

    import org.apache.commons.httpclient.methods.multipart.FilePart;

    import org.apache.commons.httpclient.methods.multipart.MultipartRequestEntity;

    import org.apache.commons.httpclient.methods.multipart.Part;

    import org.apache.log4j.Logger;

    public class FileLoadClient {   

        private static Logger logger = Logger.getLogger(FileLoadClient.class);

        public static String fileload(String url, File file) {

            String body = "{}";       

            if (url == null || url.equals("")) {

                return "参数不合法";

            }

            if (!file.exists()) {

                return "要上传的文件名不存在";

            }

            PostMethod postMethod = new PostMethod(url);       

            try {           

                // FilePart:用来上传文件的类,file即要上传的文件

                FilePart fp = new FilePart("file", file);

                Part[] parts = { fp };

                // 对于MIME类型的请求,httpclient建议全用MulitPartRequestEntity进行包装

                MultipartRequestEntity mre = new MultipartRequestEntity(parts, postMethod.getParams());

                postMethod.setRequestEntity(mre);

                HttpClient client = new HttpClient();

                // 由于要上传的文件可能比较大 , 因此在此设置最大的连接超时时间

                client.getHttpConnectionManager().getParams() .setConnectionTimeout(50000);

                int status = client.executeMethod(postMethod);

                if (status == HttpStatus.SC_OK) {

                    InputStream inputStream = postMethod.getResponseBodyAsStream();

                    BufferedReader br = new BufferedReader(new InputStreamReader(inputStream));

                    StringBuffer stringBuffer = new StringBuffer();

                    String str = "";

                    while ((str = br.readLine()) != null) {

                        stringBuffer.append(str);

                    }               

                    body = stringBuffer.toString();                

                } else {

                    body = "fail";

                }

            } catch (Exception e) {

                logger.warn("上传文件异常", e);

            } finally {

                // 释放连接

                postMethod.releaseConnection();

            }       

            return body;

        }   

        public static void main(String[] args) throws Exception {

            String body = fileload("http://localhost:8080/fileupload/upload", new File("C:/1111.txt"));

            System.out.println(body);

        }

    }

     

    (2)servlet换为springMvc中的Controller

    import java.io.File;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.io.InputStream;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import org.apache.log4j.Logger;

    import org.springframework.stereotype.Controller;

    import org.springframework.web.bind.annotation.RequestMapping;

    import org.springframework.web.bind.annotation.RequestMethod;

     

    @Controller

    @RequestMapping("/fileupload")

    public class FileUploadService {

        private Logger logger = Logger.getLogger(FileUploadService.class);

        @RequestMapping(consumes = "multipart/form-data", value = "/hello", method = RequestMethod.GET)

        public void hello(HttpServletRequest request, HttpServletResponse response) throws IOException {        

            response.getWriter().write("Hello, jetty server start ok.");

        }

        @RequestMapping(consumes = "multipart/form-data", value = "/upload", method = RequestMethod.POST)

        public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException {

            String result = "";

            if (request.getContentLength() > 0) {           

                   InputStream inputStream = null;

                   FileOutputStream outputStream = null;              

                try {

                    inputStream = request.getInputStream();

                    // 给新文件拼上时间毫秒,防止重名

                    long now = System.currentTimeMillis();

                    File file = new File("c:/", "file-" + now + ".txt");

                    file.createNewFile();

                    outputStream = new FileOutputStream(file);               

                    byte temp[] = new byte[1024];

                    int size = -1;

                    while ((size = inputStream.read(temp)) != -1) { // 每次读取1KB,直至读完

                        outputStream.write(temp, 0, size);

                    }

                    logger.info("File load success.");

                    result = "File load success.";

                } catch (IOException e) {

                    logger.warn("File load fail.", e);

                    result = "File load fail.";

                } finally {

                    outputStream.close();

                    inputStream.close();

                }

            }       

            response.getWriter().write(result);

        }

    }

     

     (3)启动jetty的核心代码,在Eclipse里面右键可以启动,也可以把项目打成jar报启动

    import org.apache.log4j.Logger;

    import org.eclipse.jetty.server.Connector;

    import org.eclipse.jetty.server.Server;

    import org.eclipse.jetty.server.ServerConnector;

    import org.eclipse.jetty.webapp.WebAppContext;

    public class Launcher

    {   

        private static Logger logger = Logger.getLogger(Launcher.class);

        private static final int PORT = 8080;

        private static final String WEBAPP = "src/main/webapp";

        private static final String CONTEXTPATH = "/";

        private static final String DESCRIPTOR = "src/main/webapp/WEB-INF/web.xml";

        /*

         * 创建 Jetty Server,指定其端口、web目录、根目录、web路径

         * @param port

         * @param webApp

         * @param contextPath

         * @param descriptor

         * @return Server

         */

        public static Server createServer(int port, String webApp, String contextPath, String descriptor) {

            Server server = new Server();

            //设置在JVM退出时关闭Jetty的钩子

            //这样就可以在整个功能测试时启动一次Jetty,然后让它在JVM退出时自动关闭

            server.setStopAtShutdown(true);

            ServerConnector connector = new ServerConnector(server);

            connector.setPort(port);

            //解决Windows下重复启动Jetty不报告端口冲突的问题

            //在Windows下有个Windows + Sun的connector实现的问题,reuseAddress=true时重复启动同一个端口的Jetty不会报错

            //所以必须设为false,代价是若上次退出不干净(比如有TIME_WAIT),会导致新的Jetty不能启动,但权衡之下还是应该设为False

            connector.setReuseAddress(false);

            server.setConnectors(new Connector[]{connector});

            WebAppContext webContext = new WebAppContext(webApp, contextPath);

            webContext.setDescriptor(descriptor);

            // 设置webapp的位置

            webContext.setResourceBase(webApp);

            webContext.setClassLoader(Thread.currentThread().getContextClassLoader());

            server.setHandler(webContext);       

            return server;

        }

        /**

         * 启动jetty服务

         */

        public void startJetty() {

            final Server server = Launcher.createServer(PORT, WEBAPP, CONTEXTPATH, DESCRIPTOR);

            try {

                server.start();

                server.join();           

            } catch (Exception e) {

                logger.warn("启动 jetty server 失败", e);

                System.exit(-1);

            }

        }

     

        public static void main(String[] args) {       

            (new Launcher()).startJetty();

            // jetty 启动后的测试url

            // http://localhost:8080/fileupload/hello

        }   

    }

    springMvc的配置不贴了,大家可以下载源码下来看。

     

    (4)运行效果

    上传包含1W个文件的文件夹,正常

     

    大型文件续传功能正常 。

     

    文件批量上传正常

     

    服务器中已经根据日期+GUID生成了目录

    数据库中也有记录

    后端代码逻辑大部分是相同的,目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

    欢迎入群一起讨论:374992201

    展开全文
  • 核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。 *如何分片; *如何合成一个文件; *中断了从哪个分片开始。 ...

    核心原理:

     

    该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。

    * 如何分片;

    * 如何合成一个文件;

    * 中断了从哪个分片开始。

    如何分,利用强大的js库,来减轻我们的工作,市场上已经能有关于大文件分块的轮子,虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系,我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。

    如何合,在合之前,我们还得先解决一个问题,我们如何区分分块所属那个文件的。刚开始的时候,我是采用了前端生成了唯一uuid来做文件的标志,在每个分片请求上带上。不过后来在做秒传的时候我放弃了,采用了Md5来维护分块和文件关系。

    在服务端合并文件,和记录分块的问题,在这方面其实行业已经给了很好的解决方案了。参考迅雷,你会发现,每次下载中的时候,都会有两个文件,一个文件主体,另外一个就是文件临时文件,临时文件存储着每个分块对应字节位的状态。

    这些都是需要前后端密切联系才能做好,前端需要根据固定大小对文件进行分片,并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后,服务器只需要按照请求数据中给的分片序号和每片分块大小(分片大小是固定且一样的)算出开始位置,与读取到的文件片段数据,写入文件即可。

    为了便于开发,我 将服务端的业务逻辑进行了如下划分,分成初始化,块处理,文件上传完毕等。

    服务端的业务逻辑模块如下

     

    功能分析:

    文件夹生成模块

    文件夹上传完毕后由服务端进行扫描代码如下

     

    分块上传,分块处理逻辑应该是最简单的逻辑了,up6已经将文件进行了分块,并且对每个分块数据进行了标识,这些标识包括文件块的索引,大小,偏移,文件MD5,文件块MD5(需要开启)等信息,服务端在接收这些信息后便可以非常方便的进行处理了。比如将块数据保存到分布式存储系统中

     

    分块上传可以说是我们整个项目的基础,像断点续传、暂停这些都是需要用到分块。

    分块这块相对来说比较简单。前端是采用了webuploader,分块等基础功能已经封装起来,使用方便。

    借助webUpload提供给我们的文件API,前端就显得异常简单。

    前台HTML模板

     

    分则必合。把大文件分片了,但是分片了就没有原本文件功能,所以我们要把分片合成为原本的文件。我们只需要把分片按原本位置写入到文件中去。因为前面原理那一部我们已经讲到了,我们知道分块大小和分块序号,我就可以知道该分块在文件中的起始位置。所以这里使用RandomAccessFile是明智的,RandomAccessFile能在文件里面前后移动。但是在andomAccessFile的绝大多数功能,已经被JDK1.4的NIO的“内存映射文件(memory-mapped files)”取代了。我在该项目中分别写了使用RandomAccessFile与MappedByteBuffer来合成文件。分别对应的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。两个方法代码如下。

    秒传功能

    服务端逻辑

    秒传功能,相信大家都体现过了,网盘上传的时候,发现上传的文件秒传了。其实原理稍微有研究过的同学应该知道,其实就是检验文件MD5,记录下上传到系统的文件的MD5,在一个文件上传前先获取文件内容MD5值或者部分取值MD5,然后在匹配系统上的数据。

    Breakpoint-http实现秒传原理,客户端选择文件之后,点击上传的时候触发获取文件MD5值,获取MD5后调用系统一个接口(/index/checkFileMd5),查询该MD5是否已经存在(我在该项目中用redis来存储数据,用文件MD5值来作key,value是文件存储的地址。)接口返回检查状态,然后再进行下一步的操作。相信大家看代码就能明白了。

    嗯,前端的MD5取值也是用了webuploader自带的功能,这还是个不错的工具。

    控件计算完文件MD5后会触发md5_complete事件,并传值md5,开发者只需要处理这个事件即可,

    断点续传

    up6已经自动对断点续传进行了处理,不需要开发都再进行单独的处理。

    在f_post.php中接收这些参数,并进行处理,开发者只需要关注业务逻辑,不需要关注其它的方面。

    断点续传,就是在文件上传的过程中发生了中断,人为因素(暂停)或者不可抗力(断网或者网络差)导致了文件上传到一半失败了。然后在环境恢复的时候,重新上传该文件,而不至于是从新开始上传的。

    前面也已经讲过,断点续传的功能是基于分块上传来实现的,把一个大文件分成很多个小块,服务端能够把每个上传成功的分块都落地下来,客户端在上传文件开始时调用接口快速验证,条件选择跳过某个分块。

    实现原理,就是在每个文件上传前,就获取到文件MD5取值,在上传文件前调用接口(/index/checkFileMd5,没错也是秒传的检验接口)如果获取的文件状态是未完成,则返回所有的还没上传的分块的编号,然后前端进行条件筛算出哪些没上传的分块,然后进行上传。

    当接收到文件块后就可以直接写入到服务器的文件中

    这是文件块上传的效果

    这是文件夹上传完后的效果

    这是文件夹上传完后在服务端的存储结构

    参考文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

    欢迎入群一起讨论“374992201”

    展开全文
  • php WebUploader 分片上传

    2020-05-28 15:11:47
    核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。 *如何分片; *如何合成一个文件; *中断了从哪个分片开始。 ...
  • js WebUploader 分片上传

    2020-05-28 16:57:14
    前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传原理与实践。该博客重在实践。 一. ...
  • WebUploader 大文件或视频上传

    千次阅读 2018-02-27 11:39:58
    WebUploader 上传东西其实没啥好说的,原理上传图片一样,只不过文件要大一点。废话就不多说,上代码://html &lt;div id="uploader" class="wu-example"&gt; &lt;!--用来存放...
  • 对文件实现切片上传原理就是在前端上传,在后台接收到指定的文件夹,等所有的切片文件都上传完成后,在后台完成合并即可。webuploder就不多做介绍了百度的一个上传插件,但是webuploader的API,emmmmm反正看着好难受...
  • 总结一下大文件分片上传...所以我们本地在上传的时候,要将大文件进行分片,比如分成1024*1024B,即将大文件分成1M的片进行上传,服务器在接收后,再将这些片合并成原始文件,这就是分片的基本原理。断点续传要求本地要
  • WebUploader是一款比较受欢迎的上传插件,不对它进行过多描述,网上对它的介绍文章很多。 原理 WebUploader负责前端分块,分块的目的是为了支持续传。使用普通的文件上传,在上传过程中一旦失败就要重新开始,有...
  • (二)asp.net WebUploader 分片上传

    千次阅读 2016-06-29 19:31:08
    原理:服务器端代码将webuploader分片文件,追加到文件上。 结论:1、asp.net做服务器端,单线程条件下(webuploader的threads值为1),测试上传1.7G文件没有问题;不支持多线程,可改进;2、同样代码移植到 j2ee ...
  • 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传原理与实践。该博客重在实践。 一. ...
  • 其基本原理是:将文件进行分片,并且在每个分片上传之前先与服务器端进行校验(我们可以通过 md5验证,也可以直接通过分片的文件名来验证),如果服务器已存在这个分片文件则跳过,否则才上传。1,效果图(1)这里我上传...
  • 大文件分片上传原理利用前端框架WebUploader配置进行对大文件的分片(由Baidu官方测试,每5M一个分片是效率最高的),这里,我的服务端是php,所以需要修改php.ini里面的post_max_size配置,默认是2M,我这里改的...
  •  客户端选取文件,通过webuploader进行MD5然后进行分片,每一个分片均需要进行上传前检查(检查当前分片时候已经上传),如果没有上传就开始进行上传,最后在上传完成之后会调用一个合并的操作,在后台将所有分片依次...
  • 使用PHP+webuploader实现多张图片上传 花了一天多的时间写写了个图片上传功能,为了保证样式好看些,就使用的webuoloader插件.在实际运用中需要注意安全性,比如文件上传漏洞,以及表单多次提交等问题. 使用过程 ...
  • 小白也看得懂的图片上传 使用的组件 FileUpload + WebUploader 大家看了值呼内行,太简单啦! WebUploader 跳转 FileUpload 跳转 使用的框架Springboot+mybatis 虽然是我们可能使用的框架可能会不同但是实现的原理和...
  • 客户端选取文件,通过webuploader进行MD5然后进行分片,每一个分片均需要进行上传前检查(检查当前分片时候已经上传),如果没有上传就开始进行上传,最后在上传完成之后会调用一个合并的操作,在后台将所有分片依次...
  • 最近项目上用到文件分片上传,于是找到了百度的一个开源前端控件webuploader。...分段上传原理其实就是在前端使用JavaScript对文件进行分割成不同小块,然后每次ajax请求就post一小块,直到全部收到为止。 但是...
  • webuploader 断点续传

    2019-10-10 13:09:06
    webuploader是百度开发的上传文件前端控件。可支持html5和flash,因此对浏览器的兼容比较好。因为需要用到ie8,ie8不支持html5, 所以必须支持flash上传。 断点续传原理: 1)将大分件分片上传,比如每次传送3m。 2...
  • 核心原理:该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。*如何分片;*如何合成一个文件;*中断了从哪个分片开始。如何分,利用...
  • 因前端页面开发使用的为VUE开发,又要支持IE9,遂只有基于...webuploader使用html上传,如果低版本就是用flash上传,上传原理就不一一描述了,感兴趣的同学可以到webuploader官网查看。 使用html上传,如谷歌,IE...
  • 项目中使用WebUploader做的图片上传功能,出现一个奇怪的问题,就是页面第一次加载完成之后,点击浏览文件的按钮没有反应。 以下是参考网上的一些说法: 问题的原因大体是这样,WebUploader初始化的时候,封装了一...
  •   文件秒传的实现原理其实就是在文件上传前,把内容读取出来,算出 md5 值,然后通过 ajax 与服务端进行验证, 然后根据结果选择继续上传还是跳过上传 js-spark-md5   虽然百度的WebUploader也能够计算文件Md5,...
  • 这两天关于大文件上传这个问题搞得很是头疼,昨天下班回去调研了下,对于不同大小的文件对应有几种解决办法: l 500M以下的用http协议传输(网上一搜大把的),比如Flash,Plupload,WebUploader,SilverUpload,...
  • 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对 Http 协议较模糊,故这次采用渐进的方式来学习文件上传原理与实践。该博客重在实践。 一. ...
  • 核心原理: 该项目核心就是文件分块上传。前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题。 *如何分片; *如何合成一个文件; *中断了从哪个分片开始。 ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 131
精华内容 52
关键字:

webuploader上传原理