[转帖]FLEX图片预览上传_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3643 | 回复: 0   主题: [转帖]FLEX图片预览上传        下一篇 
Leon
注册用户
等级:少校
经验:1436
发帖:116
精华:7
注册:2013-1-4
状态:离线
发送短消息息给Leon 加好友    发送短消息息给Leon 发消息
发表于: IP:您无权察看 2013-1-10 9:50:29 | [全部帖] [楼主帖] 楼主

这些天正在研究flex图片预览上传功能,于是找了一些资料进行了整理,形成了比较完整的示例,在此给自己留下参考资料。

       需要以下两个jar包:commons-fileupload-1.2.jar和commons-io-1.4.jar

       上代码,flex代码

      

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  3.  layout="absolute" 
  4.  xmlns="*" 
  5.  creationComplete="init();"> 
  6.  <mx:Script> 
  7.  <![CDATA[ 
  8.  import flash.events.*; 
  9.  import mx.controls.Alert; 
  10.  import mx.events.CloseEvent; 
  11.  import mx.managers.CursorManager; 
  12.  private var file:FileReference; 
  13.  private var byteArray:ByteArray; 
  14.  private var bitmapData:BitmapData; 
  15.  private var loader:Loader=new Loader(); 
  16.  private function init():void 
  17.  { 
  18.  Security.allowDomain("*"); 
  19.  file=new FileReference(); 
  20.  file.addEventListener(Event.COMPLETE, fileReferenceCompleteHandler); 
  21.  file.addEventListener(Event.SELECT, fileReferenceSelectHandler); 
  22.  } 
  23.  //选择上传的图片 
  24.  private function choose():void 
  25.  { 
  26.  var imageTypes:FileFilter=new FileFilter("Images (*.jpg, *.jpeg, *.png)", "*.jpg;*.jpeg;*.png"); 
  27.  var allTypes:Array=new Array(imageTypes); 
  28.  file.browse(allTypes); 
  29.  // file.browse(); 
  30.  } 
  31.  private function toUpload():void 
  32.  { 
  33.  if (bitmapData == null) 
  34.  { 
  35.  Alert.show("请您先选择要上传的图片"); 
  36.  } 
  37.  else 
  38.  { 
  39.  Alert.show("上传 " + file.name + " (共 " + Math.round(file.size) + " 字节)?", "确认上传", Alert.YES | Alert.NO, null, proceedWithUpload); 
  40.  } 
  41.  } 
  42.  //监听文件上传状态 
  43.  private function onProgress(e:ProgressEvent):void 
  44.  { 
  45.  lbProgress.text=" 已上传 " + e.bytesLoaded + " 字节,共 " + e.bytesTotal + " 字节"; 
  46.  var proc:uint=e.bytesLoaded / e.bytesTotal * 100; 
  47.  bar.setProgress(proc, 100); 
  48.  bar.label="当前进度: " + " " + proc + "%"; 
  49.  if (e.bytesLoaded == e.bytesTotal) 
  50.  { 
  51.  CursorManager.removeBusyCursor(); 
  52.  } 
  53.  } 
  54.  //上传图片到服务器 
  55.  private function proceedWithUpload(e:CloseEvent):void 
  56.  { 
  57.  if (e.detail == Alert.YES) 
  58.  { 
  59.  //进度监听 
  60.  file.addEventListener(ProgressEvent.PROGRESS, onProgress); 
  61.  var request:URLRequest=new URLRequest("http://localhost:8080/upload_1/servlet/upload"); 
  62.  //设置鼠标忙状态 
  63.  CursorManager.setBusyCursor(); 
  64.  try 
  65.  { 
  66.  file.upload(request); 
  67.  Alert.show("恭喜你,上传成功"); 
  68.  } 
  69.  catch (error:Error) 
  70.  { 
  71.  Alert.show("上传失败"); 
  72.  trace("上传失败"); 
  73.  } 
  74.  
  75.  } 
  76.  } 
  77.  //上传完成调用 
  78.  private function completeHandle(event:Event):void 
  79.  { 
  80.  Alert.show("恭喜你,上传成功"); 
  81.  } 
  82.  //载入本地图片 
  83.  private function fileReferenceCompleteHandler(e:Event):void 
  84.  { 
  85.  byteArray=file.data; 
  86.  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler); 
  87.  loader.loadBytes(byteArray); 
  88.  } 
  89.  //图片载入完成显示在预览框中 
  90.  private function loaderCompleteHandler(e:Event):void 
  91.  { 
  92.  var bitmap:Bitmap=Bitmap(loader.content); 
  93.  bitmapData=bitmap.bitmapData; 
  94.  img.source=bitmap; 
  95.  } 
  96.  //选择文件动作监听 
  97.  private function fileReferenceSelectHandler(e:Event):void 
  98.  { 
  99.  file.removeEventListener(ProgressEvent.PROGRESS, onProgress); 
  100.  file.load(); 
  101.  } 
  102.  ]]> 
  103.  </mx:Script> 
  104.  <mx:Canvas width="100%" height="100%" x="10" y="10" fontSize="15"> 
  105.  <mx:Panel width="469" 
  106.  height="392" 
  107.  verticalGap="0" 
  108.  horizontalAlign="left" 
  109.  verticalAlign="top" 
  110.  x="0" 
  111.  y="0" 
  112.  layout="absolute"> 
  113.  <mx:Image id="img" width="400" height="300" x="36" y="44"/> 
  114.  </mx:Panel> 
  115.  <mx:Button label="选择文件" click="choose();" x="500" y="400"/> 
  116.  <mx:VBox id="shangchuan" width="100%" horizontalAlign="center" visible="true"> 
  117.  <mx:Label id="lbProgress" text="上传"/> 
  118.  <mx:ProgressBar id="bar" 
  119.  labelPlacement="bottom" 
  120.  minimum="0" 
  121.  visible="true" 
  122.  maximum="100" 
  123.  label="当前进度: 0%" 
  124.  direction="right" 
  125.  mode="manual" 
  126.  width="200"/> 
  127.  <mx:Button label="上传文件" click="toUpload();"/> 
  128.  </mx:VBox> 
  129.  </mx:Canvas> 
  130. </mx:Application> 

后台servlet:

  1. /** 
  2.  * get及post提交方式 
  3.  * 
  4.  * @param request 
  5.  * @param response 
  6.  * @throws ServletException 
  7.  * @throws IOException 
  8.  */ 
  9.  @SuppressWarnings({ "rawtypes", "unchecked" }) 
  10.  public void doGetAndPost(HttpServletRequest request, 
  11.  HttpServletResponse response) throws ServletException, IOException { 
  12.  request.setCharacterEncoding("GBK"); 
  13.  // 文件存放的目录 
  14.  //C:\\Documents and Settings\\jnzbht\\Workspaces\\MyEclipse 8.5\\upload\\WebRoot\\upload\\ 
  15.  File tempDirPath = new File(request.getSession().getServletContext().getRealPath("/")+ "\\upload\\"); 
  16.  if (!tempDirPath.exists()) { 
  17.  tempDirPath.mkdirs(); 
  18.  } 
  19.  
  20.  // 创建磁盘文件工厂 
  21.  DiskFileItemFactory fac = new DiskFileItemFactory(); 
  22.  
  23.  // 创建servlet文件上传组件 
  24.  ServletFileUpload upload = new ServletFileUpload(fac); 
  25.  
  26.  //使用utf-8的编码格式处理数据 
  27.  upload.setHeaderEncoding("utf-8"); 
  28.  
  29.  // 文件列表 
  30.  List fileList = null; 
  31.  
  32.  // 解析request从而得到前台传过来的文件 
  33.  try { 
  34.  fileList = upload.parseRequest(request); 
  35.  } catch (FileUploadException ex) { 
  36.  ex.printStackTrace(); 
  37.  return; 
  38.  } 
  39.  // 保存后的文件名 
  40.  String imageName = null; 
  41.  // 便利从前台得到的文件列表 
  42.  
  43.  Iterator<FileItem> it = fileList.iterator(); 
  44.  
  45.  
  46.  while (it.hasNext()) { 
  47.  
  48.  FileItem item = it.next(); 
  49.  // 如果不是普通表单域,当做文件域来处理 
  50.  if (!item.isFormField()) { 
  51.  //生成四位随机数 
  52.  Random r = new Random(); 
  53.  int rannum = (int) (r.nextDouble() * (9999 - 1000 + 1)) + 1000; 
  54.  
  55.  imageName = DateUtil.getNowStrDate() + rannum 
  56.  + item.getName(); 
  57.  
  58.  BufferedInputStream in = new BufferedInputStream(item 
  59.  .getInputStream()); 
  60.  BufferedOutputStream out = new BufferedOutputStream( 
  61.  new FileOutputStream(new File(tempDirPath + "\\" 
  62.  + imageName))); 
  63.  Streams.copy(in, out, true); 
  64.  
  65.  } 
  66.  } 
  67.  } 

源码见附件

访问路径为

http://localhost:8080/upload_1/upload/upload.html


本文出自 “GUI” 博客,请务必保留此出处http://xingfudehunpo.blog.51cto.com/1843260/1112981




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论