1. 程式人生 > >基於HTML5+js+Java實現單檔案檔案上傳到伺服器功能

基於HTML5+js+Java實現單檔案檔案上傳到伺服器功能

HTML5程式碼:

方法一:直接表單提交

1

2

3

4

5

6

<form name="upform" action="url" 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 提交

js程式碼:

FormData可以把它理解成一個虛擬的表單物件,它只有一個方法append,我們可以通過append向FormData裡面新增各種需要提交的資料。

 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不要去處理髮送的資料

       contentType: false, // 告訴jQuery不要去設定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();

        //根據自己需要返回頁面一個 retMsg

         // return retMsg 證明上傳成功

      } catch (Exception e) {

        e.printStackTrace();

      }