Ajax技術に基づいてファイルアップロードの進捗バーを実現します。

7086 ワード

ajax ファイルアップロードプログレスバー

1.概要
実際のWebの開発やウェブサイトの開発の過程では、常にファイルアップロードの機能を実現する必要があります。ファイルのアップロードの過程では、常にユーザーが長い待ち時間を必要とし、ユーザーにアップロードの進捗状況を把握させるために、ファイルをアップロードすると同時に、ファイルのアップロードの進捗バーを表示することができます。この例を実行して、図1に示すように、ファイルアップロードページにアクセスし、「ブラウズ」ボタンをクリックしてアップロードするファイルを選択します。ファイルが50 MBを超えてはいけないので、そうでなければ、システムがエラーメッセージを与えます。アップロードするファイルを選択したら、「提出」ボタンをクリックし、ファイルをアップロードしてアップロードの進捗を表示します。
2.技術上のポイント
主にオープンソースのCommon-File Uploadコンポーネントを適用してセグメントファイルのアップロードを実現し、現在アップロード中で、アップロードの進捗を継続的に取得します。Common-File Uploadのコンポーネントについて詳しく説明します。
Common-FileUploadコンポーネントの時にApacheが組織しているjakata-commonsプロジェクトの下のサブプロジェクトで、このコンポーネントは簡単にmultip/form-dataタイプの要求の中の各種フォームドメインを解析できます。このコンポーネントはもう一つのCommon-InOというコンポーネントのサポートが必要です。これらの2つのコンポーネント・ファイルはhttp://commons.apache.orgウェブサイトでダウンロードできます。
（1）アップロードオブジェクトの作成
Common-File Uploadコンポーネントがファイルアップロードを実現するためには、工場のオブジェクトを作成し、当該工場のオブジェクトに基づいて新たなファイルアップロードオブジェクトを作成する必要があります。具体的なコードは以下の通りです。


DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);

（2）アップロード要求を解析する
ファイルアップロードオブジェクトを作成すると、そのオブジェクトを適用してアップロード要求を解析し、すべてのフォーム項目を取得することができます。ファイルアップロードオブジェクトのパーサーレクト（）方法により実現できます。パーrseRequest（）方法の構文構造は以下の通りである。


public List parseRequest(HttpServletRequest request) throws FileUploadException

（3）FileItem類
Common-File Uploadコンポーネントでは、ファイルドメインであれ、一般フォームドメインであれ、FileItemオブジェクトとして扱われます。オブジェクトのisFormField()メソッドの戻り値がtrueである場合は、通常のフォームドメインであることを示します。そうでない場合はファイル領域です。ファイルアップロードを実現する際には、ファイルをアップロードするファイル名をFileItem類のgetName（）法で取得し、アップロードファイルのサイズをgetSize（）法で取得することができます。
3.具体的な実現
（1）request.jsファイルを作成し、この文書でAjax要求方法を作成する。
(2)新規ファイルアップロードページindex.jspは、このページにアップロードファイル情報を得るためのフォームとフォーム要素を追加し、プログレスバーを表示するための

タグと表示パーセンテージのタブを追加します。キーコードは以下の通りです。


<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

アップロードするファイルを選択してください。注：ファイルサイズは50 M以内にしてください。


<div id="progressBar" class="prog_border" align="left">
<img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></div>
<span id="progressPercent" style="width:40px;display:none">0%</span>
<input name="Submit" type="button" value="  " onClick="deal(this.form)">
<input name="Reset" type="reset" class="btn_grey" value="  "></td>
</form>

（3）アップロードファイルのServletを新規作成し、クラスUpLpadを実現します。このクラスでファイルアップロードを実現する方法を作成します。この方法では、Common-file Uploadコンポーネントを通じてセグメントアップロードファイルを実現し、アップロード率を計算して、リアルタイムでSessionに保存します。キーコードは以下の通りです。


public void uploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //         Session  
String error = "";
int maxSize=50*1024*1024; //           
DiskFileItemFactory factory = new DiskFileItemFactory(); //      
ServletFileUpload upload = new ServletFileUpload(factory); //            
try {
List items = upload.parseRequest(request); //       
Iterator itr = items.iterator(); //     
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //  FileItem  
if (!item.isFormField()) { //         
if (item.getName() != null && !item.getName().equals("")) {//       
long upFileSize=item.getSize(); //       
String fileName=item.getName(); //     
if(upFileSize>maxSize){
error="        ，      50M   ";
break;
}
//               
File tempFile = new File(fileName); //          
String uploadPath = this.getServletContext().getRealPath("/upload");
File file = new File(uploadPath,tempFile.getName()); 
InputStream is=item.getInputStream();
int buffer=1024; //        
int length=0;
byte[] b=new byte[buffer];
double percent=0;
FileOutputStream fos=new FileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D; //          
fos.write(b,0,length); //            
session.setAttribute("progressBar",Math.round(percent)); 
}
fos.close();
Thread.sleep(1000); //    1 
} else {
error="        ！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "        ：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
}else {
request.setAttribute("result", "      ！");
request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);
}
}

（4）ファイルアップロードページindex.jspでは、作成したAjax要求方法のrequest.jsファイルを導入し、アップロード進捗のAjax要求方法とAjaxフィードバック関数を作成し、キーコードは以下の通りである。


<script language="javascript" src="js/request.js"></script>
<script language="javascript">
var request = false;
function getProgress(){ 
var url="showProgress.jsp"; //     
var param ="nocache="+new Date().getTime(); //    URL      ，          
request=httpRequest("post",url,true,callbackFunc,param); //       
}
//Ajax    
function callbackFunc(){
if( request.readyState==4 ){ //         
if( request.status == 200 ){ //        
var h = request.responseText; //         ，           
h=h.replace(/\s/g,""); //       Unicode   
document.getElementById("progressPercent").style.display=""; //      
progressPercent.innerHTML=h+"%"; //        
document.getElementById("progressBar").style.display="block"; //     
document.getElementById("imgProgress").width=h*(235/100); //       
}
}
}
</script>

（5）showPrograss.jspページを作成し、このページでSEssionドメインに保存されているアップロードプログレスバーの値をEL式で出力します。具体的なコードは以下の通りです。


<%@page contentType="text/html" pageEncoding="GBK"%>
${progressBar}

（6）フォーム提出ボタンonclickイベントで呼び出されたJavaScript方法は、WindowsオブジェクトのsetInterval（）方法で一定時間ごとにサーバに要求し、最新のアップロード進捗を得るために、キーコードは以下の通りである。


function deal(form){
form.submit(); //    
timer=window.setInterval("getProgress()",500); //  500          
}

以上述べたのは小编が绍介したAjax技术に基づいてファイルをアップロードして进度条の関连している知识を実现するので、みんなに対してある程度助けがあることを望んで、もしみんなはいかなる疑问があるならばメッセージを下さい、小编は直ちにみんなのに返答します。ここでも私たちのサイトを応援してくれてありがとうございます。

Ajax技術に基づいて、試験のカウントダウンを実現し、自動的に答案用紙を提出します。

jsのObject.assign用法例分析