ローカル画像のフレックスアップロードとアドバンスビュー方式
2022-01-04 17:53:55
パーソナライズされたアバターを変更するような機能を設計することがよくあります。最終的にはサーバーのファイルシステムにアップロードする必要がありますが、プログラムでは、ユーザーが選択した後に直接プレビューして、ユーザーがアップロードできるようにしたいのです。この機能には、技術的にはローカルファイルを読み込む機能が必要です。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);//add a Listener when the user selects a file after opening the browsing file
}
private function browseHandler(event:Event):void {
fr.browse([imageTypes]);//open the dialog for browsing files
}
private function selectHandler(event:Event):void {
fr.addEventListener(Event.COMPLETE, onLoadComplete);//add a listener for when the file load is complete
fr.load(); //Load the user selected file
}
private function onLoadComplete(e:Event):void
{
imgPhoto.source = fr.data;
}
]]>
</fx:Script>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<! -- put non-visible elements (e.g. services, value objects) here -->
</fx:Declarations>
<mx:Image id="imgPhoto" visible="true" autoLoad="true" width="1000" height="500"/& gt;
<mx:Button id="btnBrowse" label="Browse" click="browseHandler(event)" />
</s:Application>
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);//add a Listener when the user selects a file after opening the browsing file
}
private function browseHandler(event:Event):void {
fr.browse([imageTypes]);//open the dialog for browsing files
}
private function selectHandler(event:Event):void {
fr.addEventListener(Event.COMPLETE, onLoadComplete);//add a listener for when the file load is complete
fr.load(); //Load the user selected file
}
private function onLoadComplete(e:Event):void
{
imgPhoto.source = fr.data;
}
]]>
</fx:Script>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<! -- put non-visible elements (e.g. services, value objects) here -->
</fx:Declarations>
<mx:Image id="imgPhoto" visible="true" autoLoad="true" width="1000" height="500"/& gt;
<mx:Button id="btnBrowse" label="Browse" click="browseHandler(event)" />
</s:Application>
関連
-
表中の列値の小数点以下2桁を保持するフレキシブルな数値フォーマット
-
flex Object オブジェクトの中身を繰り返し処理する。
-
Flex 月の第1週を取得する 小 例
-
Flex AIR再起動設定ファイルの修正
-
FlexでArrayのIndexOfの例の役割を紹介する
-
FLEX ArrayCollection がフィルタリングされたデータを削除する問題が解決されました。
-
Flexは、 txtファイルのエラー解析と解決策の内容を読み取る
-
Flexファイル読み込みエラーの例
-
Flexフォントの太字問題は、英語フォントのみ太字にすることができる
-
データグリッドの編集不可能な行の制御方法に関する問題
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
R言語による.tar.gz.zipファイルの解凍と圧縮
-
flex4でカレントウィンドウの長さと幅を取得する方法
-
GIF 画像を読み込むためのフレックスのヒント
-
Flex エラー (mx.messaging.messages::RemotingMessage) 分析
-
Flex DataGridの自動ナンバリング例
-
ツリーバインドデータ後、自動的にツリーノードを展開するFlexメソッド
-
ie9でポップアップウィンドウを閉じる際に__flash__removeCallbackが未定義エラーになる。
-
flex actionScriptの時間処理の合計が、合計された日付を返す
-
Flex ポップアップウィンドウのリクエスト Action 関数例
-
TitleWindowのフレックスは、アイデアと実装の値を渡すために