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

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

推薦する

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

Vue はファジークエリを実装します - MySQL データベースデータ

目次1. 需要2. 実装3. 結果1. 需要入力ボックスにデータを入力し、入力結果に基づいてデータベ...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

W3C チュートリアル (3): W3C HTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

Docker Swarmの概念と使用法の詳細な説明

Docker Swarm は、Docker によって開発されたコンテナ クラスター管理サービスです。...

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...

Webpack4プラグインの実装原理についての簡単な説明

目次序文知る練習すれば完璧になる序文wabpack では、ローダーの他にプラグインがコア機能です。プ...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...

JavaScript の基本: ループと配列

目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...

CSSでサウンドを再生するいくつかのテクニック

CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れて...

Dockerコンテナのk8sデプロイメントの実装

環境: (docker、k8s クラスター)、前回 docker で起動した Java プログラムの...

2つのNode.jsプロセスがどのように通信するかの詳細な説明

目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...

ウェブサイトのコンテンツが検索エンジンに含まれないようにする方法

通常、Web サイトを構築する目的は、検索エンジンにインデックス登録してもらい、プロモーションを拡大...

Node.jsを理解するのはとても簡単です

目次Node.js の公式紹介Node.jsのコア開発言語ウェブ上の JavaScript と No...