入力ファイルの制御と美化について
一部のWebサイトにアップロードする場合、「参照」ボタンをクリックした後に[ファイルの選択]ダイアログボックスが表示されます。この機能を実現したい場合は、入力ファイル コントロールを使用して実現してください~
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> <input type="file" value="选择文件" /> </body> </html>
レンダリングは江おばさんからのものです:
注意!これがテキストとボタンで構成されているとは思わないでください。実際、これはファイル コントロールです
今日仕事で要件に遭遇しました。1 時間いじくり回した後、「ファイルが選択されていません」を表示しないでください。設定できることが分かりました。 幅の値は完了です:
コード:
幅の値は、以下に示すように、ちょうど 70px に設定されています。
【美化】
アイデア:
p の外側の層は、スタイルを記述するときに相対的に位置する必要があるため、実際のファイル コントロールがシミュレートされたファイル コントロールをカバーするように、内部の入力に位置参照を提供します。 1 つで、ファイル コントロールを非表示にします (ファイル コントロールが表示されない場合でも)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }
</style>
</head>
<body>
<br><br>
<p class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览' />
<input type="file" name="fileField" class="file" id="fileField" size="28"/>
</form>
</p>
</body>
</html>効果:
ファイル コントロールと入力の美化に関する上記の記事は、エディターによって共有されるすべてのコンテンツです。皆様の参考になれば幸いです。また、皆様も PHP 中国語 Web サイトを応援していただければ幸いです。
入力ファイルの制御と美化に関するその他の記事については、PHP 中国語 Web サイトに注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7677
15
1393
52
1207
24
91
11
JavaのFile.length()関数を使用してファイルのサイズを取得します。
Jul 24, 2023 am 08:36 AM
ファイルのサイズを取得するには、Java の File.length() 関数を使用します。ファイル操作を扱うとき、ファイル サイズは非常に一般的な要件です。Java では、ファイルのサイズを取得するための非常に便利な方法、つまり length( ) File クラスのメソッド。この記事では、このメソッドを使用してファイルのサイズを取得する方法と、対応するコード例を紹介します。まず、サイズを取得したいファイルを表す File オブジェクトを作成する必要があります。 File オブジェクトを作成する方法は次のとおりです: Filef
PHP BLOBをファイルに変換する方法
Mar 16, 2023 am 10:47 AM
PHP BLOB をファイルに変換する方法: 1. PHP サンプル ファイルを作成します; 2. 「function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })」を通じて} 」メソッドを使用して、Blob をファイルに変換できます。
紅夢ネイティブアプリケーションのランダムな詩
Feb 19, 2024 pm 01:36 PM
オープン ソースの詳細については、次のサイトを参照してください。 51CTO Honmeng 開発者コミュニティ https://ost.51cto.com 実行環境 DAYU200:4.0.10.16SDK: 4.0.10.15IDE: 4.0.600 1. アプリケーションを作成するには、[ファイル] をクリックします。 >新しいファイル ->プロジェクトの作成。テンプレートを選択します: [OpenHarmony] EmptyAbility: プロジェクト名 shici、アプリケーション パッケージ名 com.nut.shici、およびアプリケーションの保存場所 XXX (中国語、特殊文字、スペースは含まれません) を入力します。 CompileSDK10、モデル: ステージ。デバイス
JavaのFile.renameTo()関数を使用してファイルの名前を変更する
Jul 25, 2023 pm 03:45 PM
Java の File.renameTo() 関数を使用してファイルの名前を変更する Java プログラミングでは、ファイルの名前を変更する必要がよくあります。 Java には、ファイル操作を処理するための File クラスが用意されており、その renameTo() 関数でファイルの名前を簡単に変更できます。この記事では、Java の File.renameTo() 関数を使用してファイルの名前を変更する方法と、対応するコード例を紹介します。 File.renameTo() 関数は、File クラスのメソッドです。
JavaのFile.getParent()関数を使用してファイルの親パスを取得します。
Jul 24, 2023 pm 01:40 PM
ファイルの親パスを取得するには、Java の File.getParent() 関数を使用します Java プログラミングでは、ファイルやフォルダーを操作する必要がよくあります。場合によっては、ファイルの親パス、つまりファイルが存在するフォルダーのパスを取得する必要があることがあります。 Java の File クラスには、ファイルまたはフォルダーの親パスを取得する getParent() メソッドが用意されています。 File クラスは、ファイルとフォルダーを Java で抽象表現したもので、ファイルとフォルダーを操作するための一連のメソッドを提供します。その中で、手に入れてください
vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法
May 12, 2023 pm 03:58 PM
準備 vuecreateexample を使用してプロジェクトを作成します パラメーターは大まかに以下のとおりです ネイティブ入力を使用します ネイティブ入力は主に値と変更です 変更する場合はデータを同期する必要がありますApp.tsx は次のとおりです: import{ref}from'vue';exportdefault{setup(){//username はデータです constusername=ref('Zhang San');//入力ボックスが変更されると、データを同期します constonInput =;return( )=>({
Laravelの入力隠しフィールドを実装する方法
Dec 12, 2022 am 10:07 AM
laravel入力の隠しフィールドを実装する方法: 1. Bladeテンプレートファイルを見つけて開きます; 2. Bladeテンプレートのmethod_fieldメソッドを使用して隠しフィールドを作成します。作成構文は「{{ method_field('DELETE') }}」です。 」。
JavaのFile.getParentFile()関数を使用してファイルの親ディレクトリを取得します。
Jul 27, 2023 am 11:45 AM
ファイルの親ディレクトリを取得するには、Java の File.getParentFile() 関数を使用します Java プログラミングでは、ファイルやフォルダーを操作する必要がよくあります。ファイルの親ディレクトリを取得する必要がある場合は、Java が提供する File.getParentFile() 関数を使用できます。この記事では、この関数の使用方法とコード例を説明します。 Java の File クラスは、ファイルやフォルダーを操作するために使用される主なクラスです。ファイルのプロパティを取得および操作するための多くのメソッドを提供します
