java web 實現文件夾上傳(保留目錄結構)

javaweb上傳文件html

上傳文件的jsp中的部分java

上傳文件一樣能夠使用form表單向後端發請求,也能夠使用 ajax向後端發請求web

    1.經過form表單向後端發送請求ajax

         <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">app

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

            </div>ide

        </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/

相關文章
相關標籤/搜索