上傳單文件到服務(wù)器
應(yīng)公司要求，在HTML5頁面上實現(xiàn)上傳文件到服務(wù)器，對于一個還沒畢業(yè)的實習(xí)生菜鳥來說，這可不得了-----不會，網(wǎng)上各種百度，找各種博客還是沒解決，最后還是請教了公司的大神，人家給卸了一個例子，然后根據(jù)人家寫的終于把這個上傳文件搞定。
好了，開始上代碼。
HTML5代碼：
js" id="highlighter_133531">
|
1
2
3
4
5
6
|
<form name="upform" action="" method="POST"> <input type ="file" name="myfile1" id="myfile1"/><br/> <input type ="file" name="myfile2" id="myfile2"/><br/> 備注：<input type="text" name="mydata" id="mydata"/><br/> <input type="button" value="確定" onclick="upload()"/><br/> </form> |
js代碼：
FormData可以把它理解成一個虛擬的表單對象，它只有一個方法append，我們可以通過append向FormData里面添加各種需要提交的數(shù)據(jù)。
url：/adata/adata/payment/PaymentAction/upload.menu----指的是你Java接受信息的action路徑
_pathName=/adata//payment.jsp-----------指的是你HTML5頁面的虛擬路徑。
alert(result);-------指的是從Java后臺返回的信息。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
function upload() { mydata = document.getElementById("mydata").files[0]; formData = new FormData(); formData.append("mydata", mydata); $.ajax({ contentType:"multipart/form-data", url:"/adata/adata/payment/PaymentAction/upload.menu?_pathName=/adata//payment.jsp", type:"POST", data:formData, dataType:"text", processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù) contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請求頭 success: function(result){ alert(result); } }); } |
Java代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
String savePath = "d:/";//存儲路徑 String retMsg = "";//定義將返回給客戶端的信息 try { if (ServletFileUpload.isMultipartContent(request)) { List<FileItem> items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request); for (FileItem item : items) { if (!item.isFormField()) {// 過濾掉表單中非文件域 String fileType = item.getName().substring(item.getName().lastIndexOf(".") + 1).toLowerCase();//文件類型 String fileName = new Date().getTime() + "." + fileType; //保存的文件名 String filePath = savePath + "\\" + fileName; //保存的文件路徑 BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 獲得文件輸入流 BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));// 獲得文件輸出流 org.apache.commons.fileupload.util.Streams.copy(in, out, true);// 開始把文件寫到指定的上傳文件夾 retMsg += "上傳文件成功！"; in.close(); out.close(); } } } response.setContentType("text/html;charset=utf8"); PrintWriter pw = response.getWriter(); pw.print(retMsg); pw.flush(); pw.close(); //根據(jù)自己需要返回頁面一個 retMsg // return retMsg 證明上傳成功 } catch (Exception e) { e.printStackTrace(); } |
總結(jié)
以上所述是小編給大家介紹的基于HTML5+js+Java實現(xiàn)單文件文件上傳到服務(wù)器功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
原文鏈接：http://www.cnblogs.com/huangnn/archive/2017/08/19/7397245.html
