web-dev-qa-db-ja.com

「ファイル」タイプのHTML入力要素を取得してPDFファイルのみを受け入れる方法は？

html要素ファイルはありますか

<input name="file1" type="file" style="width:300px">

PDFファイルのみを受け入れ、その唯一のshow PDF files ...

ありがとう

htmlvalidationfileinput
32
air

HTML file入力フォーム要素を取得してPDFのみを受け入れるには、Firefox 9以降などの最新のブラウザーでaccept属性を使用できます。Chrome 16+ 、Opera 11+およびIE10 +など：

<input name="file1" type="file" accept="application/pdf">

複数のMIMEタイプをコンマでつなげることができます。

次の文字列は、JPG、PNG、GIF、PDF、およびEPSファイルを受け入れます。

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

古いブラウザでは、ネイティブOSファイルダイアログを制限できません。ファイル転送を処理するには、FlashまたはJavaアプレットまたはそのようなものを使用する必要があります。

そしてもちろん、これはファイルタイプの有効性を検証するために何もしません。ファイルがアップロードされたら、サーバー側でそれを行います。

少し更新– javascriptと FileReader API を使用すると、巨大なファイルをサーバーにアップロードする前に、クライアント側でさらに検証を行うことができます。もう一度チェックしてください。

61
Charlie Schliesser

あんまり。 ファイル入力 'accept'属性-便利ですか？ を参照してください。

3
Jonathan Feinberg

入力パスにファイルピッカーが入力されている場合、JavaScriptを使用してファイル拡張子を検証する以外にこれを行う方法はありません。より洗練されたものを実装するには、必要なブラウザ（activeXまたはXUL）に合わせて独自のコンポーネントを作成する必要があります

HTML4.01には「accept」属性がありますが、それをサポートしているブラウザは知りません。 accept="image/gif,image/jpeg-それはきちんとしたが非実用的な仕様です

2
DVK

前のポスターは少し間違えていました。 accept属性は表示フィルターのみです。送信する前にエントリを検証しません。

この属性は、ファイルダイアログに、必要なMIMEタイプのみを表示するように強制します。ただし、ユーザーはそのフィルターをオーバーライドできます。 。を選択して、現在のディレクトリ内のすべてのファイルを表示できます。そうすることで、彼は任意の拡張子を持つ任意のファイルを選択し、フォームを送信できます。

だから、元のポスターに答えるために、NO。 HTMLを使用して、入力ファイルを1つの特定の拡張子に制限することはできません。

ただし、送信する直前に、javascriptを使用して選択したファイル名をテストできます。送信ボタンにonclick属性を挿入し、入力ファイルの値をテストするコードを呼び出すだけです。拡張機能が禁止されている場合は、falseを返してフォームを無効にする必要があります。フォームを検証するために、jQueryカスタムバリデーターなどを使用することもできます。

最後に、サーバー側でも拡張機能をテストする必要があります。最大許容ファイルサイズについても同じ問題。

1
Kir Kanos

HTMLファイルコントロールではありません。ただし、Flashファイルアップローダーがこれを実行します。クライアント側のコードを使用して、選択後にPDF拡張子をチェックできますが、選択できるものを直接制御することはできません。

0
Nathan Taylor

番号。

ただし、 SWFUpload および Ajax Upload をチェックアウトできます

0
Scott Saunders

気を散らされたユーザーが不本意な悪い選択をするのを防ぐことは役に立ちますが、いずれにしても、とにかくサーバー側でチェックを行わなければなりません。
最善の方法は、アップロードページを明確にすることです。その後、ユーザーが間違ったタイプの大きなファイルを愚かにアップロードした場合、それは時間の損失でしょうか？

0
PhiLho