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

タイプファイルの入力ボタン機能の研究
<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スタイル設定の詳細な説明

推薦する

Centos8 で yum を使用して rabbitmq をインストールするチュートリアル

/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...

JavaScriptアニメーション関数のカプセル化の詳細な説明

目次1. アニメーション機能の原理2. アニメーション関数のシンプルなカプセル化3. アニメーション...

Vue のスロットとフィルターの詳細な説明

目次スロットスロットとは何ですか?スロットの内容コンパイルスコープフォールバックコンテンツ名前付きス...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント

ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

MySQL 5.x の文字化け問題の解決方法

MySQL はよく使われるオープンソースのデータベース ソフトウェアですが、初めてのユーザーにはあま...

MySQL 最適化の概要 - クエリエントリの合計数

1. COUNT(*) と COUNT(COL) COUNT(*)は通常、主キーに対してインデックス...

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

MySQL 8.0 redo ログの詳細な分析

目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

関連記事:初心者が学ぶ HTML タグ (5)導入された HTML タグは、必ずしも XHTML 仕...

純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

具体的なコードは次のとおりです。 HTMLコードは次のとおりです <div class=&qu...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...

Js における new 演算子の役割の詳細な説明

序文Js は現在最も一般的に使用されているコード操作言語であり、その中でも new 演算子は特によく...