zoukankan      html  css  js  c++  java
  • java+大文件上传

    javaweb上传文件


    上传文件的jsp中的部分

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

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

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

                <div class="bbxx wrap">

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

                    <inputtype="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。在使用前需要配置一下数据库,可以参考我写的这篇文章:

  • 相关阅读:
    问题解决:在js中绑定onclick事件为什么不加括号,在html代码中必须要加?(转载)
    web前端学习(四)JavaScript学习笔记部分(4)-- JavaScriptDOM对象
    web前端学习(四)JavaScript学习笔记部分(3)-- JavaScript函数+异常处理+事件处理
    web前端学习(四)JavaScript学习笔记部分(2)-- JavaScript语法详解
    web前端学习(四)JavaScript学习笔记部分(1)-- JavaScript基础教程
    web前端学习(三)css学习笔记部分(10)-- 初级开发工程师面试题
    web前端学习(三)css学习笔记部分(9)-- 初级开发工程师实战
    web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触
    关于rss的内容(转载)
    Django框架简介及模板Template,filter
  • 原文地址:https://www.cnblogs.com/songsu/p/11307125.html
Copyright © 2011-2022 走看看