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