Flex之小功能——文件上传（Flex+java）

仿照网上“半杯咖啡”的文章，做了一下FLEX+JAVA的多个文件上传功能

Flex实现多文件上传之一：前台部分

Flex实现多文件上传之二：后台部分(java) 

半杯咖啡写的还是很好的，就是没全公开源码(不过主要代码已经给出了...).有些地方我还没弄懂：如进度条刷新... 效果如下：
 

界面就是仿照“半杯咖啡”的上传界面，加了TOOLTIP，位置没调。大小进行处理了，不过就是进度条没有处理好！删除一条数据时，再加入文件，位置不变的话进度条也不变！试了很多方法，就是没法改变。按照“半杯咖啡”的写法我这就报错，而且没看懂这代码什么意思：grid.parent.refresh();  而且它是在itemrenderer里面，不好处理！ 希望有高人指点一二。

 

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="486" height="316" title="文件上传" fontSize="12" borderColor="#CCECB7" backgroundColor="#A0D3B9" backgroundAlpha="0.8" status="此次共上传{selectedFiles.length}个文件">
<mx:Script>
	<![CDATA[
		import mx.MediaVO;
		import mx.core.Application;
		import mx.managers.PopUpManager;
		import mx.collections.ArrayCollection;
		import mx.controls.DataGrid;
		import flash.net.FileReference;
		import mx.rpc.events.ResultEvent;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
		import mx.controls.Alert;
	
		//声明上传用到的FileReferenceList
		[Bindable]
		private var fileL:FileReferenceList;
		//声明上传文件用到的servlet（其实已经通过show方法传入）
		[Bindable]
		private var uploadUrl:String;
		//选择文件时用到的arrayCollection,也是datagrid的数据源
		[Bindable]
		private var selectedFiles:ArrayCollection = new ArrayCollection;
		
		//谁需要此组件的时候就调用此方法   UploadPanel.show("http://localhost:8082/Myflex/upload");
		public static function show(uploadUrl:String = ""):void
		{
			var parentApp:Application = Application.application as Application;
			var uv:UploadPanel = UploadPanel(PopUpManager.createPopUp(parentApp,UploadPanel,true));
			uv.uploadUrl = uploadUrl;
			PopUpManager.centerPopUp(uv);
		}
		//浏览文件
		private function addFiles():void
		{
			fileL = new FileReferenceList();
			fileL.addEventListener(Event.SELECT,selectFiles);
			fileL.browse();
		}
		//选择文件到列表
		private function selectFiles(event:Event):void
		{
			for(var i:int=0;i<event.currentTarget.fileList.length;i++){
			   var f:FileReference = FileReference(event.currentTarget.fileList[i]); 
			   //obj是为了在datagird中显示将要上传的文件信息
			   var obj:Object= new Object();
			   obj.fileName = f.name;
			   obj.fileSize = formatFileSize(f.size);
			   obj.fileType = f.type;
			   obj.fileRefrence = f;
			   selectedFiles.addItem(obj);
			}
		}
		//逐个上传文件
		private function uploadHandler():void{
			var file:FileReference;
			for(var i:int = 0 ;i<selectedFiles.length;i++){
		   		file = FileReference(selectedFiles[i].fileRefrence);
		   		//media是将数据保存到数据库中声明的对象，不保存信息的话，这一段可以不要
		   		var media:MediaVO = new MediaVO();
		   		media.testid = this.parentApplication.tid;
		   		media.mc = file.name;
		   		media.size = formatFileSize(file.size);
		   		media.attachment = "D:\\upload\\"+file.name;
		  		this.parentApplication.aom2.mediaSvc.save(media);//由于remoteObject在别的窗口中，此句不必深究....
		  		
		   		file.upload(new URLRequest(uploadUrl));
			}
		}
		
		// 格式化文件大小
		private function formatFileSize(numSize:Number):String {
			var strReturn:String;
			numSize = Number(numSize / 1000);
			strReturn = String(numSize.toFixed(1) + " KB");
			if (numSize > 1000) {
				numSize = numSize / 1000;
				strReturn = String(numSize.toFixed(1) + " MB");
				if (numSize > 1000) {
					numSize = numSize / 1000;
					strReturn = String(numSize.toFixed(1) + " GB");
				}
			}				
			return strReturn;
		}
		//关闭本窗口
		private function close():void
		{
			PopUpManager.removePopUp(this);
		}
	]]>
</mx:Script>

	<mx:DataGrid id="dg" dataProvider="{selectedFiles}" y="33" width="446" height="184" fontSize="10" horizontalCenter="0" textAlign="center" fontFamily="Verdana">
		<mx:columns>
			<mx:DataGridColumn headerText="文件名称" dataField="fileName" width="120" showDataTips="true"/>
			<mx:DataGridColumn headerText="文件大小" dataField="fileSize" width="60"/>
			<mx:DataGridColumn headerText="文件类型" dataField="fileType" width="50"/>
			<mx:DataGridColumn headerText="上传状态" width="130">
				<mx:itemRenderer>
				  <mx:Component>
				    <mx:HBox width="130" horizontalGap="2">
				     <mx:ProgressBar id="progress" width="100" 
				      minimum="0" maximum="100" source="{data.fileRefrence}" 
				      labelPlacement="center" progress="progress.label='%3%%';"
				      label="%3%%"
				      paddingLeft="2"
				      paddingRight="2">
				     </mx:ProgressBar>
				     <mx:LinkButton width="15" toolTip="取消上传" click="cancel()"
				      icon="@Embed('assets/cancel.png')"  paddingLeft="2">
				      <mx:Script>
					       <![CDATA[
					        private function cancel():void{
					         data.fileRefrence.cancel();
					         progress.label = "已取消";
					        }
					       ]]>
					  </mx:Script>
				     </mx:LinkButton>
				     <mx:LinkButton width="15" click="deleteItem(event)" 
				      icon="@Embed('assets/delete.png')" toolTip="从列表中删除" paddingLeft="2">
				     	<mx:Script>
					       <![CDATA[
					        import mx.collections.ArrayCollection;
					        import mx.controls.DataGrid;
					       
					        private function deleteItem(event:MouseEvent):void {
					         var grid:Object = event.target.parent.parent.parent;
					         var dp:ArrayCollection = ArrayCollection(grid.dataProvider);
					         var index:int = dp.getItemIndex(data);
					         dp.removeItemAt(index); 
					         progress.label = "0%";//刷新进度条的label
					         //grid.parent.refresh();	//这句在我机子上报错！哎...				        }
					       ]]>
					      </mx:Script>
				     </mx:LinkButton>
				    </mx:HBox>
				  </mx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Button x="199" y="233" label="浏览..." click="addFiles()"/>
	<mx:Button x="289" y="233" label="上传" width="64" enabled="{selectedFiles.length>0}" click="uploadHandler()"/>
	<mx:Button x="379" y="233" label="关闭" width="64" click="close()"/>
  </mx:Panel>

 相应的servlet代码如下：

package yang.utils;
import javax.servlet.http.HttpServlet;
import org.apache.log4j.Logger;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import java.util.List;
import org.apache.commons.fileupload.FileUploadException;
import java.util.Iterator;
import org.apache.commons.fileupload.FileItem;
import java.io.File;
import java.io.UnsupportedEncodingException;

import org.apache.commons.lang.ObjectUtils;

public class FileUploadAction extends HttpServlet{
    /**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private static Logger logger = Logger.getLogger(FileUploadAction.class.getName());

    private int maxPostSize = 100 * 1024 * 1024;
    private String uploadPath = "D:\\upload\\";


    public FileUploadAction() {
    }

    //文件上传
    public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException {
        logger("begin upload");
        try {
    request.setCharacterEncoding("UTF-8");//防止文件名称带有汉字后传到服务器乱码
   } catch (UnsupportedEncodingException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
        response.setContentType("text/html; charset=UTF-8");
        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(1024 * 4);
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setFileSizeMax(maxPostSize);

        logger("request================"+ObjectUtils.toString(request));
        List fileItems = null;
        try {
            fileItems = upload.parseRequest(request);
            logger("===================="+ObjectUtils.toString(fileItems));
            Iterator iter = fileItems.iterator();
            while (iter.hasNext()) {
                FileItem item = (FileItem) iter.next();
                log(item.toString());
                if (!item.isFormField()) {
                    String name = item.getName();
                    logger("file name = "+name);
                    try {
                        item.write(new File(uploadPath + name));
                    }
                    catch (Exception ex) {
                        logger(ex.getMessage());
                    }
                }
            }
        }
        catch (FileUploadException ex1) {
            logger("FileUploadException->"+ex1.getMessage());
        }


    }

    private void logger(String info){
        System.out.println(info);
    }

}

 

不过不要忘了在web.xml中加入：

<!-- For file uploaded -->  
   <servlet>  
        <servlet-name>FileUploaded</servlet-name>  
        <servlet-class>yang.utils.FileUploadAction</servlet-class>  
    </servlet>  
  
    <servlet-mapping>  
        <servlet-name>FileUploaded</servlet-name>  
        <url-pattern>/FileUploaded</url-pattern>  
    </servlet-mapping>

 

 

此处有两个上传组件可以参考：

 

http://labs.newmediateam.com/Multifileupload/FileUpload.html

 

http://weblog.cahlan.com/files/FileUpload/FileUploadApp.html

评论

1 楼 king_wgj 2009-06-30  

谢谢楼主分享，请你打个包共享一下好吗？