• html+前端超大视频上传解决方案


    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

  • 相关阅读:
    redis hash结构如何设置过期时间
    C# 激活主窗口
    C# 发送消息SendKeys、SendMessage、keybd_event的用法
    【总结】清除webbrowser cookie/session的6种方法
    清除webBrowser 缓存和Cookie的解决方案
    完美解决C#Webbrowser控件设置Cookie问题
    WebBrowser脚本错误的完美解决方案
    c# 控制IE浏览器
    法嵌入互操作类型“SHDocVw.ShellWindowsClass”请改用适用的接口-解决方法
    C# 总结const、 readonly、 static三者区别:
  • 原文地址:https://www.cnblogs.com/songsu/p/14185499.html
Copyright © 2020-2023  润新知