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>

赞 (0)

相关推荐

  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

    如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例</title>    <meta http-equiv=

  • php和jquery实现地图区域数据统计展示数据示例

    php和jquery实现地图区域数据统计展示数据示例

    HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框. 复制代码 代码如下: <div id="map"></div> <div id="tip"></div> jQuery 通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

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

    经常会设计一个这样的功能,比如更改个性头像,这个个性头像最终需要上传到服务器的文件系统中,但是程序希望在用户选择后直接有个预览,然后用户才进行上传.这个功能技术上其实就是需要对本地的文件能进行读取.在flash player10中有个类FileReference的类可以实现这个功能,而实现对文件读取的接口是load( )函数,要注意的是: a.这个函数只能在UI操作中使用,比如用户按下按钮. b.加载进来后的本地文件无法在AS中使用 c.这个接口是一个异步的过程,也就不是马上就加载进来,需要加L

  • SpringBoot 利用MultipartFile上传本地图片生成图片链接的实现方法

    方法一 实现类: public String fileUpload(MultipartFile file) { if(file == null){ return null; } String fileName = file.getOriginalFilename(); fileName = FileUtil.renameToUUID(fileName); //自定义保存到本地路径 String uploadpath = "D:/image/"; try{ FileUtil.upload

  • android实现上传本地图片到网络功能

    本文实例为大家分享了android上传本地图片到网络的具体代码,供大家参考,具体内容如下 首先这里用到了Okhttp 所以需要一个依赖: compile 'com.squareup.okhttp3:okhttp:3.9.0' xml布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res

  • H5上传本地图片并预览功能

    H5上传本地图片并预览功能

    最近工作中需要H5上传显示图片的功能,如图: 直接上代码: html部分 <div class="works-wrap"> <div class="figure-box" id="figure_box"></div> <div class="add-btn"> <input type="file" id="imgUploadBtn"

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

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

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

  • jquery.uploadifive插件怎么解决上传限制图片或文件大小问题

    jquery.uploadifive插件怎么解决上传限制图片或文件大小问题

    jQuery.uploadifive插件可以很好的解决上传限制图片或文件大小问题,具体方法如下所示: 插件是可以用  但遇到问题如何提示是否超过限制呢 没办法研究插件js   发现网上给的提示这个插件里竟然没有没有没有.... 好吧  我就把onError拿出来看返回值 呵呵了 对了 使用该插件要引用 <script src="js/jquery-1.11.0.min.js"></script> <script src="../bootstrap

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

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

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

  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

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

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

  • uniapp上传二进制图片的实现

    uniapp上传二进制图片的实现

    功能需求: 前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览. 思路如下: 前端选择本地的png.jpg.等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种.然后前端将这个图片链接渲染在页面进行预览. 首先 我们看一下uniapp的官方文档:https://uniapp.dcloud.io/api/media/image?id=chooseimage 大概是这样的 先写一个模拟

随机推荐