atitit. 檔案上傳帶進度條 atiUP 設計 java c# php

標籤：

atitit. 檔案上傳帶進度條 atiUP 設計 java c# php

 

1. 設計要求 1

2. 原理and 架構 1

3. ui 2

4. spring mvc 2

5. springMVC.xml 3

6. struts extand url 3

7. behide code 3

8. 簡化設計 3

 

1. 設計要求

帶進度條

完成提示動畫效果..

 

 

2. 原理and 架構

如果需要顯示進度條，即時顯示檔案上傳進度
需要使用Ajaxj技術..up到個在的iframe黑頭..
工作原理
其實際就是在處理上傳檔案的同時，將上傳進度的資訊例如檔案總長噸，已經上傳多少，傳輸速率寫入session中，用戶端遊覽器
利用Ajax技術再新開一個獨立的進程從session中擷取上傳進度資訊，並即時顯示，Ajax技術能夠 不重新整理頁面擷取伺服器資料。session
可看做是伺服器記憶體，可以用於存放少量的客戶資訊。

 

 

上傳監聽器
commons-fileupload版1.2支援上傳監聽，只需要實現一個監聽器，並把它添加到上傳組件上即可。監聽器需要實現它的progresslistener

 

 

 

作者:: 老哇的爪子 Attilax 艾龍，  EMAIL:[email protected]

轉載請註明來源： http://blog.csdn.net/attilax

 

 

3. ui

prj.wechatAdm4prop

house_list.jsp

   <iframe id="upIfrm" src="up.jsp?callx=callO7" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="width:100%; height:60px"></iframe>

function callO7(path)

{

//alert(path);

$("#filex").val(path);

// okTips();

}

 

4. spring mvc 

web.xml

<!-- spring mvc start  p3h -->

 <!-- o7h ati -->

 <servlet>

  <servlet-name>spring</servlet-name>

  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

  <init-param>

   <param-name>contextConfigLocation</param-name>

   <param-value>/WEB-INF/springMVC.xml</param-value>

  </init-param>

  <load-on-startup>1</load-on-startup>

 </servlet>

 <!-- ///o7h -->

 <servlet-mapping>

  <servlet-name>spring</servlet-name>

  <!-- 這裡在配成spring,下邊也要寫一個名為spring-servlet.xml的檔案，主要用來配置它的controller -->

  <url-pattern>/spr/*</url-pattern>

 </servlet-mapping>

 

 <!-- spring mvc start  p3h  end  -->

 

 

5. springMVC.xml

<mvc:annotation-driven />

<context:annotation-config />

<context:component-scan  base-package="JUnit4,com.im,com.im.**,com.attilax.up.**,com.focusx.dictionary.action.**"/>

<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />  

 

6. struts extand url

   <constant name="struts.action.excludePattern" value="/dwr/.*,/dwr/test/.*,/spr/.*,/eqMntRun.jsp,/vod/eqMntRun.jsp,/comm/.*,/house/.*"></constant>

 

7. behide code

/wechatAdmin4propt/src/com/attilax/up/FileUploadController.java

 

 

 

 

8. 簡化設計

up_smp.jsp

 

參考

atitit.檔案上傳帶進度條的實現原理and組件選型and最佳實務總結O7

 

 

 

atitit. 檔案上傳帶進度條 atiUP 設計 java c# php