タイプファイルの入力ボタン機能の研究

タイプファイルの入力ボタン機能の研究
<br />一部のWebサイトでアップロードする場合、「参照」ボタンをクリックすると[ファイルの選択]ダイアログボックスが表示されます。多くの場合、画像ファイルのみをアップロードする必要がありますが、ポップアップの [ファイルの選択] ダイアログボックスには関連する画像形式のファイルのみが表示され、他のすべての形式のファイルはフィルタリングされて表示されません。
たとえば、http://www.youku.com/v1.0.0326/v/swf/up.swf
これは、FLASH 方式を使用してビデオ以外のファイルが表示されないようにする Youku のビデオアップロード オプションです。
この効果のFLASHは一般的にここで説明されている通りです
flash.net.FileReferenceList をインポートします。
var fileRef:FileReferenceList = 新しい FileReferenceList();
var allTypes:配列 = [];
var browse type:Object = new Object();
閲覧タイプ.description = "閲覧タイプ (*.mp3)";
参照 type.extension = "*.mp3";
allTypes.push(ブラウズタイプ);
fileRef.browse(すべてのタイプ);
では、Web ページの <input type="File"> に対して、ファイルの種類を制限するポップアップ ウィンドウを実装することもできますか?
現在の解決策は、監視を通じて、アップロードされたファイルの形式が正しくないことをユーザーに通知することです。
<スクリプト>
関数チェック(){
var ファイルパス = パス.値
ファイルパス=ファイルパス.substring(ファイルパス.lastIndexOf('.') 1,ファイルパス.length)
if(ファイルパス != 'jpg' && ファイルパス != 'gif')
alert("アップロードできるのは JPG または GIF 形式の画像のみです")
}
</スクリプト>
<input type=file name=path onpropertychange="check()"> (アップロードできるのは JPG または GIF 形式の画像のみです)
<スクリプト>
関数 ck(obj){if(obj.value.length>0){
var af="jpg、gif、png、zip、rar、txt、htm";
if(eval("with(obj.value)if(!/" af.split(",").join("|") "/ig.test(substring(lastIndexOf('.') 1,length)))1;")){alert("許可され​​るファイルの種類:\n" af);obj.createTextRange().execCommand('delete')};
}}
</スクリプト>
<フォーム>
<input type=ファイル名=パス onpropertychange="ck(this)"/></form>
しかし、この効果は明ら​​かに FLASH のユーザー エクスペリエンスほど良くはありません。このようなFLASHアップロードには注意が必要です。

<<:  Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

>>:  4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

推薦する

HTMLページのヘッダーコードは完全に明確です

以下のコードはすべて <head>...</head> の間にあり、具体的な...

Tomcatディレクトリ構造の詳細な説明

目次ディレクトリ構造binディレクトリconfディレクトリlibディレクトリwebapps ディレク...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

CSS 配送先住所平行四辺形線スタイルの例コード

コードは次のようになります。 // 配送先住所の平行四辺形の線のスタイル <view clas...

Uniapp は DingTalk スキャンコード ログイン サンプル コードを実装します

UniappにはDingTalk認証ログインがないため、この記事ではDingTalk QRコードログ...

Nginxを使ってサーバー内で複数コンテナの共存を実現する方法

背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...

Vueはログイン時に画像認証コードを実装します

この記事では、Vueログイン用画像認証コードの具体的なコードを例として紹介します。具体的な内容は以下...

Vue テンプレート構成と Webstorm コード形式仕様設定

目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...

フローティングをクリアするいくつかの方法(推奨)

1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...

インライン要素とブロック要素とは何ですか?

1. インライン要素はコンテンツの幅のみを占めますが、ブロック要素はコンテンツの量に関係なく行全体を...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...

Windows オペレーティング システムでポートの使用状況を照会およびクリアするプログラム

Windowsオペレーティングシステムでは、ポートの占有状況を照会し、ポートの占有状況をクリアするプ...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

nginxリバースプロキシのマルチポートマッピングの実装

コードの説明1.1 http:www.baidu.test.com のデフォルトは 80 で、リバー...