<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    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 閱讀(4235) 評論(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 小東

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

    主站蜘蛛池模板: 免费A级毛片在线播放不收费| 久久精品视频免费看| 免费观看美女裸体网站| a级日本高清免费看| 巨波霸乳在线永久免费视频| 成人毛片免费观看视频在线| 亚洲精品无码成人AAA片| 亚洲制服丝袜第一页| 人禽杂交18禁网站免费| 亚洲入口无毒网址你懂的| 成人免费视频77777| 亚洲精品无码mⅴ在线观看| 免费人成网上在线观看| 亚洲国产精品一区二区第四页 | 亚洲成a人片在线观看中文!!!| 18禁无遮挡无码国产免费网站| 色播亚洲视频在线观看| 美女被免费喷白浆视频| 精品亚洲一区二区| 午夜免费福利小电影| 亚洲国产精品视频| 久久成人免费电影| 中文字幕在线观看亚洲视频| 免费无码又爽又刺激毛片| 四虎永久在线精品免费一区二区| 97在线观免费视频观看| 无码天堂va亚洲va在线va| 亚洲人成人一区二区三区| 91免费国产精品| 99亚洲精品卡2卡三卡4卡2卡| 日韩一卡2卡3卡4卡新区亚洲 | 一级做a毛片免费视频| 免费人成网站7777视频| 99久久婷婷免费国产综合精品| 精品日韩亚洲AV无码一区二区三区| 成人性生交大片免费看无遮挡| 免费在线人人电影网| 1区1区3区4区产品亚洲| 四虎永久免费网站免费观看| 国产羞羞的视频在线观看免费| 亚洲综合激情五月色一区|