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

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

推薦する

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...

background-positionプロパティでのパーセンテージ値の使用法の検討

背景位置が背景画像の表示に与える影響この2日間のプロジェクトでホームページの写真を入れ替えていたとこ...

JS での new の手書き実装

目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

Linux Autofs 自動マウント サービスのインストールと展開のチュートリアル

目次1. autofs サービスの紹介2. Autofsのインストールと展開3. Autofs効果の...

MySQL マスタースレーブレプリケーションスレッドの状態遷移に関する詳細な理解

序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

MySQL で B+ ツリー インデックスを使用する利点は何ですか?

この問題を理解する前に、まず MySQL テーブルのストレージ構造を確認し、次にバイナリ ツリー、マ...

MySQL はどのようにしてデータベースの削除と暴走を効果的に防ぐことができますか?

目次セーフモード設定テスト1. where句なしで更新および削除する2. 非インデックスキーの削除3...

仕事でよく使うLinuxコマンドまとめ

仕事では、docker や kubernetes などのオープンソース ツールをさらに活用しましょう...

MySQL の基本ステートメントを最適化するための 10 の原則の概要

序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...

docker で mysql に接続できない場合の解決策

シナリオ: 仮想マシンの Docker コンテナに最新バージョンの MySQL をインストールした後...