Flex上传本地图片并提前浏览的实现方法_Flex

经常会设计一个这样的功能,比如更改个性头像,这个个性头像最终需要上传到服务器的文件系统中,但是程序希望在用户选择后直接有个预览,然后用户才进行上传。这个功能技术上其实就是需要对本地的文件能进行读取。在flash player10中有个类FileReference的类可以实现这个功能,而实现对文件读取的接口是load( )函数,要注意的是:

a、这个函数只能在UI操作中使用,比如用户按下按钮。
b、加载进来后的本地文件无法在AS中使用
c、这个接口是一个异步的过程,也就不是马上就加载进来,需要加Listener来操作。

下面是参考代码

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.IOErrorEvent;
import flash.events.Event;

private var fr:FileReference;
private var imageTypes:FileFilter;

private function creationCompleteHandler(event:Event):void {
fr = new FileReference();
imageTypes = new FileFilter("Images (*.jpg, *.jpeg, *.png, *.gif)","*.jpg; *.jpeg; *.png; *.gif;")
fr.addEventListener(Event.SELECT, selectHandler);//增加当打开浏览文件后,用户选择好文件后的Listener
}

private function browseHandler(event:Event):void {
fr.browse([imageTypes]);//打开浏览文件的dialog
}

private function selectHandler(event:Event):void {
fr.addEventListener(Event.COMPLETE, onLoadComplete);//增加一个文件加载load完成后的listener
fr.load(); //加载用户选中文件
}

private function onLoadComplete(e:Event):void
{
imgPhoto.source = fr.data;
}

]]>
</fx:Script>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<mx:Image id="imgPhoto" visible="true" autoLoad="true" width="1000" height="500"/>
<mx:Button id="btnBrowse" label="Browse" click="browseHandler(event)" />
</s:Application>

时间: 2024-09-19 21:06:18

Flex上传本地图片并提前浏览的实现方法_Flex的相关文章

Flex上传本地图片并提前浏览的实现方法

 个性头像最终需要上传到服务器的文件系统中,但是程序希望在用户选择后直接有个预览,针对这个问题,下面有个不粗的实现,希望对大家有所帮助 经常会设计一个这样的功能,比如更改个性头像,这个个性头像最终需要上传到服务器的文件系统中,但是程序希望在用户选择后直接有个预览,然后用户才进行上传.这个功能技术上其实就是需要对本地的文件能进行读取.在flash player10中有个类FileReference的类可以实现这个功能,而实现对文件读取的接口是load( )函数,要注意的是:    a.这个函数只能

高拍仪 上传图片-如何不用file控件上传本地图片到服务器

问题描述 如何不用file控件上传本地图片到服务器 公司引进高拍仪,想拍完照片点上传按钮直接上传图片.高拍仪接口能提供照片的本地路径,现在的问题是不用file控件选择,只有路径,不知道如何上传到服务器,求解决方案. 解决方案 做成c/s,b/s你只能做插件安装到浏览器了. 解决方案二: Jfkfkenskqkqnskwknw 解决方案三: 我也想知道这个问题的 解决方案四: 直接做成cs,然后可能需要嵌入式. 解决方案五: 用socket套接字实现上传协议(比如http上传的put协议) 解决方

Android设置拍照或者上传本地图片的示例_Android

前几天,我们客户端这边收到了市场部的一个需求,需要在我们订单成交后,我们的客户端有一个上传交易凭证的功能,那么如何在Android实现上传图片的这个功能呢?在我进行编码之前,我先问自己几个问题. 第一, 图片是直接选择图库里的,还是需要拍照和选择图片两个选项? 因为在选择图片的时候,会有一个拍照的按钮,也可以实现拍照的功能. 第二, 需不需要本地缓存? 本地缓存值得是,在我们的图片上传后,是否在下次直接显示,而不是从服务器读取. 第三,图片是否需要压缩? 众所周知,图片这种资源,因为体积较大,在

Android设置拍照或者上传本地图片的示例

前几天,我们客户端这边收到了市场部的一个需求,需要在我们订单成交后,我们的客户端有一个上传交易凭证的功能,那么如何在Android实现上传图片的这个功能呢?在我进行编码之前,我先问自己几个问题. 第一, 图片是直接选择图库里的,还是需要拍照和选择图片两个选项? 因为在选择图片的时候,会有一个拍照的按钮,也可以实现拍照的功能. 第二, 需不需要本地缓存? 本地缓存值得是,在我们的图片上传后,是否在下次直接显示,而不是从服务器读取. 第三,图片是否需要压缩? 众所周知,图片这种资源,因为体积较大,在

96微信编辑器如何远程上传替换图片

  96微信编辑器如何远程上传替换图片: 第一.将图片上传到微信素材管理-图片素材里 进入素材管理->图片库,点击右侧的上传按钮,上传本地图片到微信素材库. 第二.进入微信素材库里,点击想要获取的图片,右键点击"复制图片地址",这样可以看到"图片地址"将该图片地址复制下来. 第三.点击进入96微信编辑器,通过粘贴图片地址方式上传图片,将图片的地址粘贴到"地址"后面的的文本框中,然后点击"确认"按钮将图片插入到编辑器.

为什么在“浏览”选项用上传的图片就不可以了,网页(包括原来输入的文字)

问题描述 为什么用系统中的图片可以更换头像,可是在"浏览"选项用上传的图片就不可以了,网页(包括原来输入的文字)全部变为?,网页上全是?,上传的图片也不会改变<!--#includefile="conn.asp"--><!--#includefile="../inc/function.asp"--><!--#includefile="../inc/cls_user.asp"--><%d

基于jquery实现图片上传本地预览功能_jquery

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦.一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.UR

微信开发之调起摄像头、本地展示图片、上传下载图片实例_javascript技巧

之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口

jquery 图片上传本地预览效果代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net /1999/xhtml" > <head>     <meta http-