Junky's IT Notebook

          統計

          留言簿(8)

          積分與排名

          WebSphere Studio

          閱讀排行榜

          評論排行榜

          采用dwr+ajax和struts開發文件上傳進度條(轉)

          編寫監聽器以及相關的類

          不用自己寫了,源碼可以從

          http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example里面下載,

          下載地址

          http://www.telio.be/blog/wp-content/uploads/2006/01/ajax-upload-1.0.war

          下載完之后,你需要解包,在命令行中:

          jar xvf ajax-upload-1.0.war

          源碼就在\WEB-INF\src下面

          將要用到的文件有resources文件夾下,\WEB-INF\下面的dwr.xmllib下面的jar文件

          上傳頁面

          在上面解開的包里面有index.jsp這個是上傳頁面,upload.jsp負責上傳,resources包里面包含了dwr與服務器通訊的javascript腳本,你需要把index.jspform中的action換成你的struts action即可,然后把form中的file名改成你actionform中的file屬性名,把頁面中剩余的file去掉

          index.jsp上傳頁面示例代碼:

          <%@ page contentType="text/html; charset=gb2312" language="java"

              import="java.util.*" errorPage=""%>

          <%

              String path=request.getContextPath();

          %>

          <html locale="true">

          <head>

          <SCRIPT language=javascript>

          function check_file() {

           var strFileName=document.forms(0).file;

            if (strFileName.value==""){

              alert("請選擇要上傳的文件");

              return false;

           }

           startProgress();

          }

          function loadmessage()

                  <%

                 if (request.getAttribute("message") != null) {

                 %> 

                     window.alert("<%=request.getAttribute("message")%>");

                     window.returnValue="yes";

                 <%}%>

          }

          </SCRIPT>

          <title>上傳</title>

                 <script src='<%=path%>/resources/js/upload.js'> </script>

                  <script src='<%=path%>/dwr/interface/UploadMonitor.js'> </script>

                  <script src='<%=path%>/dwr/engine.js'> </script>

                  <script src='<%=path%>/dwr/util.js'> </script>

                  <style type="text/css">

                      #progressBar { padding-top: 5px; }

                      #progressBarBox { width: 350px; height: 20px; border: 1px inset; background: #eee;}

                      #progressBarBoxContent { width: 0; height: 20px; border-right: 1px solid #444; background: blue; }

                  </style>

                 <LINK href="<%=path%>/css/style.css" type="text/css" rel="stylesheet">

           

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

          </head>

          <style type="text/css">

          <!--

          body {

              margin-left: 0px;

              margin-top: 0px;

              margin-right: 0px;

              margin-bottom: 0px;

           

          }

          -->

          </style>

          <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="loadmessage()">

          <form name="form" method="post" action="<%=path%>/upload.do?method=upload" enctype="multipart/form-data" onSubmit="return check_file()">

           <table width="60%" border="0" cellspacing="1">

              <tr background-color=" #E7F5FE">

                <td width="30%" align="right">從文件導入:</td>

                <td width="51%"><input type="file" name="file" class="input"></td>

                <td width="27%"><input type="submit" name="files" class="button_4"

                                  style="border-style:None;width:71px;" value="確定" id="uploadbutton">

                </td>

              </tr>

              <tr align="left" background-color=" #E7F5FE">

                <td colspan="3">

               <div id="progressBar" style="display: none;">

           

                      <div id="theMeter">

                          <div id="progressBarText"></div>

                          <div id="progressBarBox">

                              <div id="progressBarBoxContent"></div>

                          </div>

                      </div>

                  </div>

               </td>

              </tr>

           </table>

          </form>

          </body>

          </html>

          并且要修改一下\resources\js中的upload.js文件:

          /* Licence:

          *   Use this however/wherever you like, just don't blame me if it breaks anything.

          *

          * Credit:

          *   If you're nice, you'll leave this bit:

          *

          *   Class by Pierre-Alexandre Losson -- http://www.telio.be/blog

          *   email : plosson@users.sourceforge.net

          */

          function refreshProgress()

          {

              UploadMonitor.getUploadInfo(updateProgress);

          }

           

          function updateProgress(uploadInfo)

          {

              if (uploadInfo.inProgress)

              {

                 document.getElementById('uploadbutton').disabled = true;

                  document.getElementById('file').disabled = true;

           

                  var fileIndex = uploadInfo.fileIndex;

           

                  var progressPercent = Math.ceil((uploadInfo.bytesRead / uploadInfo.totalSize) * 100);

           

                  document.getElementById('progressBarText').innerHTML = '文件讀取進度: ' + progressPercent + '%';

           

                  document.getElementById('progressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';

           

                  window.setTimeout('refreshProgress()', 1000);

              }

              else

              {

                  document.getElementById('uploadbutton').disabled = false;

                  document.getElementById('file').disabled = false;

              }

           

              return true;

          }

           

          function startProgress()

          {

              document.getElementById('progressBar').style.display = 'block';

              document.getElementById('progressBarText').innerHTML = '文件讀取進度: 0%';

              document.getElementById('uploadbutton').disabled = true;

           

              // wait a little while to make sure the upload has started ..

              window.setTimeout("refreshProgress()", 1000);

              return true;

          }

          配置dwr.xml

          放在/WEB-INF/下面

          <dwr>

              <allow>

                  <create creator="new" javascript="UploadMonitor">

                      <param name="class" value="be.telio.mediastore.ui.upload.UploadMonitor"/>

                  </create>

                  <convert converter="bean" match="be.telio.mediastore.ui.upload.UploadInfo"/>

              </allow>

          </dwr>

          web.xml中配置dwr,省略springstruts等的配置

          <servlet>

                        <servlet-name>dwr-invoker</servlet-name>

                        <display-name>DWR Servlet</display-name>

                        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>

                        <init-param>

                               <param-name>debug</param-name>

                               <param-value>false</param-value>

                        </init-param>

                        <init-param>

                               <param-name>logLevel</param-name>

                               <param-value>WARN</param-value>

                        </init-param>

          </servlet>

          <servlet-mapping>

                        <servlet-name>dwr-invoker</servlet-name>

                        <url-pattern>/dwr/*</url-pattern>

          </servlet-mapping>

          編寫strutsMultipartRequestHandler AjaxMultipartRequestHandler

          實現 MultipartRequestHandler接口并在struts-config.xmlcontroller中替換默認的multipartClass

          <controller>

                        <set-property property="multipartClass"

                               value="org.springside.components.ajaxupload.AjaxMultipartRequestHandler" />

          </controller>

          其實這個類AjaxMultipartRequestHandler編寫很簡單,把strutssrc源碼中的org.apache.struts.upload.CommonsMultipartRequestHandler.java修改一下就可以了

          public void handleRequest(HttpServletRequest request)

                     throws ServletException {

          方法中把定義factory之前的那幾行代碼注釋掉然后寫入

          UploadListener listener = new UploadListener(request, 30);

          FileItemFactory factory = new MonitoredDiskFileItemFactory(listener);

          之后再注釋掉

          // upload.setSizeThreshold((int) getSizeThreshold(ac));

          // upload.setRepositoryPath(getRepositoryPath(ac));

          這個類就算寫完了

          編寫struts上傳類

          就用你原來編寫的struts上傳類

          上傳方法代碼段示例:

          /**

               * 上傳文件

               */

              public ActionForward upload(ActionMapping mapping, ActionForm form,

                     HttpServletRequest request, HttpServletResponse response)

                     throws Exception {

                 String path = getServlet().getServletContext().getRealPath("/");

                 log.info(">>>>>>>>>>>>>>>path:" + path);

                 if (form == null) {

                     return mapping.findForward("success");

                 }

                 FileUploadForm fuf = (FileUploadForm) form;

                 FormFile file = fuf.getFile();

                 try {

                     if (file == null) {

                        log.info(">>>>>>>>>>>>>>>file為空");

                        return mapping.findForward("success");

                     }

                 } catch (Exception e) {

                     e.printStackTrace();

                 }

                 String fname = file.getFileName();

                 int t = 0;

                 for (int i = 0; i < fname.length(); i++) {

                     if (fname.charAt(i) == '.') {

                        t = i;

                     }

                 }

                 String filename = null;

                 if (t > 0) {

                     filename = fname.substring(0, t);

                 }

                 log.info(">>>>>>>>>>>>>>>文件名:" + filename);

                 String filepath = path + "dataimport/upfiles/" + fname;

                 File f = new File(path + "dataimport/upfiles/");

                 log.info(">>>>>>>>>>>>>>>文件生成路徑:" + filepath);

                 if (!f.exists()) {

                     f.mkdirs();

                 } else {

                     log.info(">>>>>>>>>>>>>>>路徑存在");

                 }

                 InputStream stream = file.getInputStream();

                 OutputStream os = new FileOutputStream(path + "dataimport/upfiles/"

                        + fname);

                 int readBytes = 0;

                 byte buffer[] = new byte[8192];

                 while ((readBytes = stream.read(buffer, 0, 8192)) != -1) {

                     os.write(buffer, 0, readBytes);

                 }

                 os.close();

                 stream.close();

                 file.destroy();

                

                 String message = "成功!";

                 request.setAttribute("message", message);

                 return mapping.findForward("success");

              }

          -------------------------一切ok------------------------

          posted on 2007-04-16 17:31 junky 閱讀(4237) 評論(6)  編輯  收藏 所屬分類: web

          評論

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉)[未登錄] 2007-07-27 22:21 gosyl

          請問struts源碼的版本是那一個 謝謝
          !  回復  更多評論   

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉) 2007-08-06 10:15 付金山

          非常感謝能看到該篇文章,目前小弟正在學習使用上傳進度條(使用struts技術上傳文件)。按照本文章一一試過過還是不行,主要有2個問題:
          1.在修改CommonsMultipartRequestHandler.java換成AjaxMultipartRequestHandler.java時出現問題:
          static Class _mthclass$(String x0)
          {
          return Class.forName(x0);
          x1;
          ......
          }
          這個地方出現問題.
          2.找不到UploadMonitor.js。
          3.運行的時候說:"UploadMonitor"未定義。
          第一個可能是struts版本的問題,第2個就不知道怎樣解決,請幫忙查看一下,小弟非常感謝。我的E_mail是:fujinshan_403@163.com。謝謝。  回復  更多評論   

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉) 2007-11-30 17:54 Nara

          Gooooooooooooooooooooooooooooooooooooooooood
          why size max  回復  更多評論   

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉) 2008-01-08 21:36 hero

          性能好像有點低哦  回復  更多評論   

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉) 2008-01-08 21:39 hero

          比我原來上傳的速度慢了n倍……  回復  更多評論   

          # re: 采用dwr+ajax和struts開發文件上傳進度條(轉) 2008-12-23 16:18 小東

          都是轉的 垃圾啊  回復  更多評論   

          主站蜘蛛池模板: 滨州市| 乌兰察布市| 会理县| 敦煌市| 石家庄市| 南京市| 招远市| 曲松县| 大兴区| 舒城县| 布尔津县| 梧州市| 嘉荫县| 玉田县| 泸溪县| 盐亭县| 新兴县| 五寨县| 女性| 宁远县| 七台河市| 拜城县| 二连浩特市| 洪洞县| 甘南县| 西昌市| 和政县| 鄂托克旗| 中牟县| 清新县| 潜江市| 天门市| 郎溪县| 垦利县| 遂溪县| 新干县| 江城| 西城区| 内江市| 东明县| 巴彦县|