flex 相册 预览

flex+java图片预览上传实例

upload.mxml

1. <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
   xmlns="*"
   creationComplete="init();">
   <mx:Script>
   <![CDATA[
   import flash.events.*;
   import flash.net.*;
   import flash.net.FileReference;
   import mx.controls.Alert;
   import mx.events.CloseEvent;
   import mx.managers.CursorManager;
   
   private var file:FileReference;
   private var byteArray:ByteArray;
   private var bitmapData:BitmapData;
   private var loader:Loader=new Loader();
   
   private function init():void
   {
   Security.allowDomain("*");
   file=new FileReference();
   file.addEventListener(Event.COMPLETE, fileReferenceCompleteHandler);
   file.addEventListener(Event.SELECT, fileReferenceSelectHandler);
   }
   
   //选择上传的图片
   private function choose():void
   {
   var imageTypes:FileFilter=new FileFilter("Images (*.jpg, *.jpeg, *.png)", "*.jpg;*.jpeg;*.png"); //定义一个过滤器
   var allTypes:Array=new Array(imageTypes);
   file.browse(allTypes);
   // file.browse();
   }
   
   private function toUpload():void
   {
   if (bitmapData == null)
   {
   Alert.show("请您先选择要上传的图片");
   }
   else
   {
   Alert.show("上传 " + file.name + " (共 " + Math.round(file.size) + " 字节)?", "确认上传", Alert.YES | Alert.NO, null, proceedWithUpload);
   }
   }
   
   //监听文件上传状态
   private function onProgress(e:ProgressEvent):void
   {
   lbProgress.text=" 已上传 " + e.bytesLoaded + " 字节，共 " + e.bytesTotal + " 字节";
   var proc:uint=e.bytesLoaded / e.bytesTotal * 100;
   bar.setProgress(proc, 100);
   bar.label="当前进度: " + " " + proc + "%";
   if (e.bytesLoaded == e.bytesTotal)
   {
   CursorManager.removeBusyCursor();
   }
   }
   
   //上传图片到服务器
   private function proceedWithUpload(e:CloseEvent):void
   {
   if (e.detail == Alert.YES)
   {
   //进度监听
   file.addEventListener(ProgressEvent.PROGRESS, onProgress);
   var request:URLRequest=new URLRequest("http://localhost:8080/photoupload/FileUploaded");
   //设置鼠标忙状态
   CursorManager.setBusyCursor();
   try
   {
   file.upload(request);
   Alert.show("恭喜你，上传成功");
   }
   catch (error:Error)
   {
   Alert.show("上传失败");
   trace("上传失败");
   }
   
   }
   }
   
   //上传完成调用
   private function completeHandle(event:Event):void
   {
   Alert.show("恭喜你，上传成功");
   }
   
   //载入本地图片
   private function fileReferenceCompleteHandler(e:Event):void
   {
   byteArray=file.data;
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
   loader.loadBytes(byteArray);
   }
   
   //图片载入完成显示在预览框中
   private function loaderCompleteHandler(e:Event):void
   {
   var bitmap:Bitmap=Bitmap(loader.content);
   bitmapData=bitmap.bitmapData;
   img.source=bitmap;
   }
   
   //选择文件动作监听
   private function fileReferenceSelectHandler(e:Event):void
   {
   file.removeEventListener(ProgressEvent.PROGRESS, onProgress);
   file.load();
   }
   ]]>
   </mx:Script>
   
   <mx:Canvas width="100%"
   height="100%"
   x="10"
   y="170"
   fontSize="15">
   <mx:VBox width="100%"
   horizontalAlign="center">
   <mx:Label id="lbProgress"
   text="上传"/>
   <mx:ProgressBar id="bar"
   labelPlacement="bottom"
   themeColor="#F20D7A"
   minimum="0"
   visible="true"
   maximum="100"
   label="当前进度: 0%"
   direction="right"
   mode="manual"
   width="200"/>
   <mx:Button label="上传文件"
   click="toUpload();"/>
   </mx:VBox>
   <mx:Panel width="469"
   height="392"
   verticalGap="0"
   horizontalAlign="center"
   verticalAlign="middle"
   x="408"
   y="129"
   layout="absolute">
   <mx:Button label="选择文件"
   click="choose();"
   x="178"
   y="9"/>
   <mx:Image id="img"
   width="400"
   height="300"
   x="36"
   y="44"/>
   
   </mx:Panel>
   
   </mx:Canvas>
   </mx:Application>

java代码：

package upload;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
* @author lqw
*/
public class FileUploaded extends HttpServlet {


// 限制文件的上传大小
private int maxPostSize = 100 * 1024 * 1024;

public FileUploaded() {
super();
}

public void destroy() {
super.destroy();
}

protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 定义文件的上传路径
// String uploadPath=request.getRealPath("/").replaceAll("\\\\", "/")+"uploadfile/";

String uploadPath = request.getSession().getServletContext().getRealPath("/")+"uploadfile/";
String relitivePath=request.getContextPath();

System.out.println(uploadPath);
System.out.println(relitivePath);
System.out.println("to upload picture !");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

// 保存文件到服务器中

DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(4096);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(maxPostSize);
try {
List fileItems = upload.parseRequest(request);
Iterator iter = fileItems.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
String name = item.getName();
System.out.println(name);
try {
item.write(new File(uploadPath + name));
// SaveFile s = new SaveFile();
// s.saveFile(name);
} catch (Exception e) {
e.printStackTrace();
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
System.out.println(e.getMessage() + "结束");
}
}

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

public String getServletInfo() {
return "Short description";
}


}

学了flex有一段时间了，就想着用flex+java做一个上传功能程序，其实flex端大部分代码都是按照别人的给的例子做的，很简单的一个小程序，只是红色标注的地方让我费了挺多时间的，上传的时候都希望上传到服务器的某个文件夹下，String uploadPath = request.getSession().getServletContext().getRealPath("/")+"uploadfile"; 一开始路径设置成这样，结果上传的时候总是在图片上加了一个定义的uploadfile的前缀，郁闷了好长时间，结果在朋友帮助下，找出原因，原来需要加上 “/”这样才Ok了，有时候没错误比有错更让人头疼啊……