1. 程式人生 > 其它 >jsp 大檔案分片上傳處理

jsp 大檔案分片上傳處理

 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。在使用前需要配置一下資料庫

白皮書,  功能介紹,  功能對比, 

控制元件原始碼下載:

asp.net原始碼下載jsp-springboot原始碼下載jsp-eclipse原始碼下載jsp-myeclipse原始碼下載php原始碼下載csharp-winform原始碼下載vue-cli原始碼下載c++原始碼下載

測試與配置:

asp.net-測試與配置jsp-eclipse-測試與配置jsp-springboot-測試與配置jsp-myeclipse-mysql-測試與配置php-測試與配置C#(WinFrom)測試與配置C++-WTL測試與配置

詳細配置資訊及思路