程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> 簡述Java異步上傳文件的三種方法

簡述Java異步上傳文件的三種方法

編輯：關於JAVA

簡述Java異步上傳文件的三種方法。本站提示廣大學習愛好者：（簡述Java異步上傳文件的三種方法）文章只能為提供參考，不一定能成為您想要的結果。以下是簡述Java異步上傳文件的三種方法正文

本文為年夜家分享了三種Java異步上傳文件方法，供年夜家參考，詳細內容以下

用第三方控件，如Flash,ActiveX等閱讀器插件上傳。
應用隱蔽的iframe模仿異步上傳。
應用XMLHttpRequest2來完成異步上傳。

第一種應用閱讀器插件上傳，須要必定的底層編碼功底，在這裡我就不講了，以避免誤人後輩，提出這點年夜家可以自行百度。
第二種應用隱蔽的iframe模仿異步上傳。為何在這裡說的是模仿呢?由於我們實際上是將前往成果放在了一個隱蔽的iframe中，所以才沒有使以後頁面跳轉，感到就像是異步操作一樣。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隱蔽的iframe上傳文件</title>
<script type="text/javascript" src="jquery途徑..."></script>
</head>
<body>
<iframe name="frm" ></iframe>
<form action="/upload2" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
  <p id="upfile">附件：
    <input type="file" name="myfile" >
  </p>
  <p id="upbtn">
    <input  type="submit" value="異步上傳">
    <span id="uptxt" >正在上傳...</span>
  </p>
</form>
<div id="flist" ></div>
<script> 
// 上傳完成後的回調 
function uploadFinished(fileName) { 
    addToFlist(fileName); 
    loading(false); 
} 
function addToFlist(fname) { 
  var temp = ["<p id='" + fname + "'>", 
        fname,
        "<button onclick='delFile(\"" + fname + "\");'>刪除</button>", 
        "</p>" 
         ]; 
   $("#flist").append(temp.join(""));
} 
function loading(showloading) { 
  if (showloading) { 
    $("#uptxt").show();
  } else { 
    $("#uptxt").hide;
  } 
} 
</script>
</body>
</html>

這類技巧有兩個症結的處所:
1.form會指定target,提交的成果定向前往到隱蔽的ifram中。(即form的target與iframe的name屬性分歧)。
2.提交完成後，iframe中頁面與主頁面通訊，告訴上傳成果及辦事端文件信息
若何與主頁面通訊呢?
我們用nodejs在吸收完了文件後前往了一個window.parent.主頁面界說的辦法，履行後可以得知文件上傳完成。代碼很簡略:

 router.post('/upload2', multipartMiddleware, function(req, res) {
   var fpath = req.files.myfile.path;
   var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);
   setTimeout(function {
     var ret = ["<script>",
 "window.parent.uploadFinished('" + fname + "');",
 "</script>"];
     res.send(ret.join(""));
   }, 3000);
 });

履行後可以翻開開辟人員選項，你會發明隱蔽iframe中前往了辦事器的一些數據。
第三種應用XMLHttpRequest2來停止真實的異步上傳。
照樣先貼出代碼:
履行後可以翻開開辟人員選項，你會發明隱蔽iframe中前往了辦事器的一些數據。第三種應用XMLHttpRequest2來停止真實的異步上傳。照樣先貼出代碼：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>xhr level2 異步上傳</title>
 <script type="text/javascript" src="jquery途徑..."></script>
 </head>
 <body>
 <div>
   <p id="upfile">附件： <input type="file" id="myfile" ></p>
   <p id="upbtn">
     <input  type="button" value="異步上傳" onclick="upload;">
     <span id="uptxt" >正在上傳...</span>
     <span id="upprog"></span>
     <button id="stopbtn" >停滯上傳</button>
   </p>
 </div>
 <div id="flist" ></div>
 <script>
 function upload {
 // 1.預備FormData
 var fd = new FormData;
 fd.append("myfile", $("#myfile")[0].files[0]);
  // 創立xhr對象
  var xhr = new XMLHttpRequest; 
  // 監聽狀況，及時呼應 
  // xhr 和 xhr.upload 都有progress事宜，xhr.progress是下載進度，xhr.upload.progress是上傳進度 
  xhr.upload.onprogress = function(event) { 
    if (event.lengthComputable) {
      var percent = Math.round(event.loaded * 100 / event.total); 
      console.log('%d%', percent); 
      $("#upprog").text(percent); 
    } 
  };
  // 傳輸開端事宜
  xhr.onloadstart = function(event) { 
    console.log('load start'); 
    $("#upprog").text('開端上傳');
    $("#stopbtn").one('click', function { xhr.abort; $(this).hide();}); 
    loading(true);
  }; 
  // ajax進程勝利完成事宜
  xhr.onload = function(event) { 
    console.log('load success');
    $("#upprog").text('上傳勝利');
    console.log(xhr.responseText);
    var ret = JSON.parse(xhr.responseText);
    addToFlist(ret.fname); 
   };
   // ajax進程產生毛病事宜 
   xhr.onerror = function(event) { 
     console.log('error'); 
     $("#upprog").text('產生毛病');
   };
   // ajax被撤消
   xhr.onabort = function(event) { 
     console.log('abort');
     $("#upprog").text('操作被撤消'); 
    };
   // loadend傳輸停止，不論勝利掉敗都邑被觸發 
   xhr.onloadend = function (event) { 
     console.log('load end'); 
     loading(false);
   }; 
   // 提議ajax要求傳送數據 
   xhr.open('POST', '/upload3', true); 
   xhr.send(fd);
  } 
  function addToFlist(fname) { 
    var temp = ["<p id='" + fname + "'>", 
          fname, 
          "<button onclick='delFile(\"" + fname + "\");'>刪除</button>", 
          "</p>"
          ]; 
    $("#flist").append(temp.join("")); 
  } 
  function delFile(fname) {
    console.log('to delete file: ' + fname);
     // TODO: 請完成 
  }
  function loading(showloading) { 
    if (showloading) {
      $("#uptxt").show(); 
      $("#stopbtn").show();
     } else { 
       $("#uptxt").hide();
       $("#stopbtn").hide();
     }
  }
 </script>
 </body>
 </html>

代碼有點多，然則淺顯易懂。應用過AJAX的人都曉得，XHR對象供給了一個onreadystatechange的回調辦法來監聽全部要求/呼應進程。在XMLHttpRequest2級標准中又多了幾個進度事宜。有以下6個事宜:

1.loadstart: 在吸收到呼應數據的第一個字節時觸發。
2.progress: 在吸收呼應時代連續赓續地觸發。
3.error: 在要求產生毛病時觸發。
4.abort: 在由於挪用abort辦法而終止銜接時觸發。
5.load: 在吸收到完全的呼應數據時觸發。
6.loadend: 在通訊完成或許觸發error,abort,load事宜後觸發。

此次我們可以解讀代碼:當傳輸事宜開端後，我們便在停滯傳送按鈕上添加點擊事宜，內置了abort辦法可以停滯傳送。若不點則會正常上傳直到傳送終了為止。厥後台代碼相似第二種辦法。
三種辦法各有好壞，做個簡略的小結吧。
第三方控件交互性和可控性好，由於接近底層，其機能也是很優良的。然則因為編寫難度年夜平日須要本身裝置插件，有時能夠須要本身停止編寫。
隱蔽的iframe辦法我小我認為長短常有思惟的一個辦法，iframe可以幫我們做許多事。這類方法具有普遍的閱讀器兼容性並且不須要裝置插件。然則它交互性差，上傳進程弗成控，並且機能也是很普通的。
XHR2級的純ajax上傳，它必需要版本比擬高一點的閱讀器(ie9+)。然則它交互性特殊好，可以看到上傳進度而且是可控的。
開辟可按需求來采取分歧辦法。小我認為這些文件上傳，特殊是第二種供給的是一種思惟，充足的應用了某些html標簽的特征，能夠是我們開辟人員須要多思慮的處所。

以上就是本文的全體內容，願望對年夜家的進修有所贊助。