基于HTML5+js+Java實現單文件文件上傳到服務器功能

更新時間：2017年08月20日 09:09:19 作者：ML夜神

應公司要求，在HTML5頁面上實現上傳文件到服務器功能，對于我這樣的菜鳥，真是把我難住了，最后還是請教大神搞定的，下面小編把例子分享到腳本之家平臺，供大家參考

上傳單文件到服務器

應公司要求，在HTML5頁面上實現上傳文件到服務器，對于一個還沒畢業(yè)的實習生菜鳥來說，這可不得了-----不會，網上各種百度，找各種博客還是沒解決，最后還是請教了公司的大神，人家給卸了一個例子，然后根據人家寫的終于把這個上傳文件搞定。

好了，開始上代碼。

HTML5代碼：

 <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里面添加各種需要提交的數據。

url：/adata/adata/payment/PaymentAction/upload.menu----指的是你Java接受信息的action路徑

_pathName=/adata//payment.jsp-----------指的是你HTML5頁面的虛擬路徑。

alert(result);-------指的是從Java后臺返回的信息。

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ā)送的數據 
       contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 
       success: function(result){ 
       alert(result); 
 } 
 }); 
}

Java代碼：

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(); 
      }

總結

以上所述是小編給大家介紹的基于HTML5+js+Java實現單文件文件上傳到服務器功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: