• js+WebUploader分片上传大文件


    javaweb上传文件

    上传文件的jsp中的部分

    上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求

        1. 通过form表单向后端发送请求

             <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">

                <div class="bbxx wrap">

                    <input type="text" id="side-profile-name" name="username" class="form-control">

                    <input type="file" id="example-file-input" name="avatar">

                    <button type="submit" class="btn btn-effect-ripple btn-primary">Save</button>

                </div>

            </form>

    改进后的代码不需要form标签,直接由控件来实现。开发人员只需要关注业务逻辑即可。JS中已经帮我们封闭好了

    通过监控工具可以看到控件提交的数据,非常的清晰,调试也非常的简单。

    2. 通过ajax向后端发送请求

            1.

                $.ajax({ 

                     url : "${pageContext.request.contextPath}/UploadServlet", 

                     type : "POST", 

                     data : $( '#postForm').serialize(), 

                     success : function(data) { 

                          $( '#serverResponse').html(data); 

                     }, 

                     error : function(data) { 

                          $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); 

                     } 

                }); 

    ajax分为两部分,一部分是初始化,文件在上传前通过AJAX请求通知服务端进行初始化操作

    在文件上传完后向服务器发送通知

    这里需要处理一个MD5秒传的逻辑,当服务器存在相同文件时,不需要用户再上传,而是直接通知用户秒传

    这里可以看到秒传的逻辑是非常 简单的,并不是特别的复杂。

                var form = new FormData();

                form.append("username","zxj");

                form.append("avatar",file);

                //var form = new FormData($("#postForm")[0]);

                $.ajax({

                    url:"${pageContext.request.contextPath}/UploadServlet",

                    type:"post",

                    data:form,

                    processData:false,

                    contentType:false,

                    success:function(data){

             

                        console.log(data);

                    }

                });

    java部分

    文件初始化的逻辑

    接收文件块数据,在这个逻辑中我们接收文件块数据。控件对数据进行了优化,可以方便调试。如果用监控工具可以看到控件提交的数据。

    注:

    1. 上面的java部分的代码可以直接使用,只需要将上传的图片路径及收集数据并将数据写入到数据库即可

    2. 上面上传文件使用到了字节流,其实还可以使用别的流,这个需要读者自己在下面完善测试

    3. BeanUtils是一个工具 便于将实体对应的属性赋给实体

    4. 上传文件不能使用 request.getParameter("")获取参数了,而是直接将request解析,通过判断每一项是文件还是非文件,然后进行相应的操作(文件的话就是用流来读取,非文件的话,暂时保存到一个map中。)

    后端代码逻辑大部分是相同的,目前能够支持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

  • 相关阅读:
    一本通 1261:【例9.5】城市交通路网
    一本通 1263:【例9.7】友好城市(数据较弱)
    洛谷 P2983 [USACO10FEB]购买巧克力Chocolate Buying
    一本通 1266:【例9.10】机器分配
    【BZOJ5417】你的名字(NOI2018)-后缀自动机+主席树
    【BZOJ1396】识别子串-后缀自动机+线段树
    【HDU4787】GRE Words Revenge-AC自动机+分块
    【51Nod1766】树上的最远点对-线段树+树的直径
    【BZOJ3648】寝室管理-环套树+点分治+树状数组
    【BZOJ1367】Sequence(Baltic2004)-贪心+左偏树
  • 原文地址:https://www.cnblogs.com/songsu/p/13965250.html
Copyright © 2020-2023  润新知