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

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

推薦する

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

MySQL テーブル分割後にスムーズにオンラインになる方法

目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...

ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...

Elementはスクリプトを使用して新しいコンポーネントを自動的に構築します

目次背景element-ui の自動構築はどのように機能しますか?メイクファイル新しい.jsファイル...

JavaScript 配列の重複排除とフラット化関数の紹介

目次1. 配列の平坦化(配列の次元削減とも呼ばれる)方法1: 削減メソッドを使用する方法2: スタッ...

Debian Dockerコンテナにcrontabスケジュールタスクを追加する

現在、DockerイメージのほとんどはDebianベースです # cat /etc/issue De...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...

MySQL インデックス カバレッジの例の分析

この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

Docker で Harbor パブリック リポジトリを構築する方法の例

前回のブログ投稿では、レジストリのプライベート ウェアハウスについて説明しました。今日は、Harbo...

vue3 コンポーネントでの v-model の使用と詳細な説明

目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...