Velo 第４９回 アップロードボタンを便利にする
アップロードボタンを利用する機会はよくありますが、画像をアップロードしたときにアップロード画像をページで確認したいものです。
これはちょっとしたコーディングで可能になります。
先ずページにダミー画像(displayImage)とアップロードボタン(uploadButton)を追加します。
ダミー画像はアップロード画像のコンテナ役です。
つまりダミー画像のサイズに合わせてアップロード画像が表示されるようにします。
この例ではダミーボタンをVeloマークにして目立たたせていますが、背景と一体化する等ニーズに合わせればよいと思います。
アップロードボタンは設定でファイル形式を「画像」、最大ファイル数を「1」にしておきます。
コードです。
onReady( ) 関数で画像の fitMode とボタンの onChange( ) イベントハンドラーを設定します。
fitMode はイメージ枠の中に画像ソースをどう表示するかの設定を定めるプロパティで、'fill'、'fit'、'fixedWidth' の３種類があります。
ここでは 'fit' を選択し枠内に画像全体を収めます。
ページ要素の「画像」と言うのは画像そのものではなく、画像ソースを表示するコンテナと思えばいいようです。
fitMode およびその効果や詳しい説明は、API 参照またはこちらをご覧下さい。
HOME | image-fitmode (wix.com)
一方、ボタンの onChange( )イベントでは、非同期でアップロードファイルを獲得し、そのURLをダミー画像のソースに設定します。
アップロードファイルは配列ですので1番目のファイルのURLをソースに設定しています。
プレビューした結果です。
画像ファイルはこのようにソースにURLを設定するだけでページに表示することができます。
エディターにこの機能があるのだと思います。
テキストファイルをこの方法で表示することはできません。
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか？