ホームページ > 記事 > ウェブフロントエンド > Ajax はプログレスバー効果を備えたファイルアップロードを実装します
今回は、プログレスバー効果機能を使用した Ajax 実装 ファイルアップロード について、実際のケースを見てみましょう。
1.概要実際のWebアプリケーション開発やWebサイト開発のプロセスでは、ファイルアップロード機能の実装が必要になることがよくあります。ファイルのアップロード プロセス中、ユーザーは長時間待機する必要があることがよくあります。これにより、ファイルのアップロード中にアップロードの進行状況をユーザーに知らせることができます。図 1 に示すように、このインスタンスを実行し、ファイル アップロード ページにアクセスし、[参照] ボタンをクリックしてアップロードするファイルを選択します。ファイルが 50MB を超えることはできないことに注意してください。50MB を超えると、システムによってエラー プロンプトが表示されます。アップロードするファイルを選択した後、「送信」ボタンをクリックすると、ファイルがアップロードされ、アップロードの進行状況が表示されます。
2. 技術的なポイント 主にオープンソースの Common-FileUpload コンポーネントを適用して、分割されたファイルのアップロードを実現し、アップロード プロセス中にアップロードの進行状況を継続的に取得します。 Common-FileUpload コンポーネントについては、以下で詳しく紹介します。
Common-FileUpload コンポーネントは、Apache 組織の jakarta-commons プロジェクトのサブプロジェクトです。このコンポーネントは、multipart/form-data タイプのリクエストのさまざまなフォーム フィールドを簡単に解析できます。このコンポーネントには、Common-IO と呼ばれる別のコンポーネントからのサポートが必要です。これら 2 つのコンポーネント パッケージ ファイルは、http://commons.apache.org Web サイトからダウンロードできます。
(1) アップロードオブジェクトの作成Common-FileUpload コンポーネントを使用してファイルアップロードを実装する場合、ファクトリオブジェクトを作成し、そのファクトリオブジェクトに基づいて新しいファイルアップロードオブジェクトを作成する必要があります。具体的なコードは次のとおりです。 :
DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory);(2) アップロード リクエストを解析します
ファイル アップロード オブジェクトを作成した後、そのオブジェクトを使用してアップロード リクエストを解析し、すべてのフォーム アイテムを取得できます。これは、ファイルアップロードオブジェクト。 parseRequest() メソッドの構文構造は以下のとおりです。
public List parseRequest(HttpServletRequest request) throws FileUploadException(3) FileItem クラス
Common-FileUpload コンポーネントでは、ファイルフィールドであっても通常のフォームフィールドであっても FileItem として扱われます。物体。オブジェクトの isFormField() メソッドが true を返す場合、それは通常のフォーム フィールドであることを意味し、それ以外の場合はファイル フィールドです。ファイルアップロードを実装する場合、FileItemクラスのgetName()メソッドでアップロードしたファイルのファイル名を取得したり、getSize()メソッドでアップロードしたファイルのサイズを取得したりできます。
3. 具体的な実装 (1) request.js ファイルを作成し、そのファイル内に Ajax
リクエストメソッドを記述します。 (2) 新しいファイルアップロードページindex.jspを作成し、アップロードされたファイルの情報を取得するためのformとform要素を追加し、プログレスバーを表示するための
とパーセンテージを表示するためのを追加します。 ; タグ、キーコードは次のとおりです:
<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">
アップロードするファイルを選択してください:
注:ファイルを管理してくださいサイズは50M以内。 <p id="progressBar" class="prog_border" align="left">
<img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></p>
<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) ファイルをアップロードするための新しいサーブレット実装クラス UpLpad を作成します。このクラスにメソッド UploadFile() を記述してファイルのアップロードを実装します。このメソッドでは、Common-FileUpload コンポーネントを使用してファイルをセクションごとにアップロードし、アップロードの割合を計算して、リアルタイムでセッションに保存します。
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) showProgress.jsp ページを記述し、このページに EL 式を適用して、セッション ドメインに保存されているアップロード プログレス バーの値を出力します。 6) フォーム送信ボタンの onclick イベントによって呼び出される JavaScript メソッドを記述します。このメソッドでは、
の setInterval() メソッドがサーバーに定期的にリクエストを送信し、最新のアップロードの進行状況を取得します。以下の通り:
<%@page contentType="text/html" pageEncoding="GBK"%> ${progressBar}
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の php 関連の Web サイトに注目してください。 推奨読書:
Ajax はどのように XML ファイルを追加、削除、変更、確認するのか
以上がAjax はプログレスバー効果を備えたファイルアップロードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。