入力タイプ=ファイルの作成方法はPDFとXLSのみを受け入れる必要があります

Question 1

使った <input type= "file" name="Upload" >

.pdfと.xlsファイルのみを受け入れることで、これを制限したいと思います。

送信ボタンをクリックすると、これが検証されます。

そして、ウェブページ上のファイル（PDF / XLS）をクリックすると、自動的に開くはずです。

誰かがこれについていくつかの例を挙げていただけますか？

Question 2

そのためには、属性acceptを使用して、許可されたMIMEタイプを追加します。ただし、すべてのブラウザがその属性を尊重するわけではなく、コードインスペクタを介して簡単に削除できます。したがって、どちらの場合でも、サーバー側でファイルの種類を確認する必要があります（2番目の質問）。

例：

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

3番目の質問「Webページのファイル（PDF / XLS）をクリックすると、自動的に開くはずです。」：

あなたはそれを達成することはできません。クライアントマシンでPDFまたはXLSを開く方法は、ユーザーが設定します。

Question 3

あなたはこれを使うことができます：

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

サポートのみ。PDFおよび。XLSファイル

Question 4

残念ながら、選択時にそれを行う保証された方法はありません。

一部のブラウザacceptはinputタグの属性をサポートしています。これは良いスタートですが、完全に信頼することはできません。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

を使用しcfinputて検証を実行し、送信時にファイル拡張子をチェックできますが、mime-typeはチェックできません。これはより良いですが、それでも確実ではありません。多くの場合、OSX上のファイルにはファイル拡張子がないか、ユーザーが悪意を持ってファイルタイプのラベルを誤って付ける可能性があります。

ColdFusion は、結果（）のプロパティをcffile使用してMIMEタイプをチェックできcontentTypeますがcffile.contentType、これはアップロード後にのみ実行できます。これは最善の策ですが、MIMEタイプがまだ間違っている可能性があるため、100％安全ではありません。

Question 5

JavaScriptを使用できます。JavaScriptでこれを行う場合の大きな問題は、入力ファイルをリセットすることであることを考慮してください。さて、これはJPGのみに制限されます（PDFの場合は、MIMEタイプとマジックナンバーを変更する必要があります）：

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

これがFirefoxとChromeの最新バージョン、およびIExplore 10でテストされたことを考慮してください。

MIMEタイプの完全なリストについては、Wikipediaを参照してください。

マジックナンバーの完全なリストについては、ウィキペディアを参照してください。

Question 6

シェルを含む任意のファイルをアップロードできるFirefoxのライブHTTPヘッダーなどのツールがあるため、サーバー側でファイルをフィルタリングします。人々があなたのサイトをハッキングする可能性があります。安全を確保するために、サーバーサイトで実行してください。

Question 7

この特定の例は複数ファイルのアップロードの場合ですが、必要な一般情報を提供します。

https://developer.mozilla.org/en-US/docs/DOM/File.type

/ download /上のファイルを操作する限り、これはJavaScriptの質問ではなく、サーバーの設定です。ユーザーがPDFまたはXLSファイルを開くために何かをインストールしていない場合、ユーザーの唯一の選択肢はそれらをダウンロードすることです。

Question 8

ファイルアップロードコントロールで、ユーザーがボタンをクリックしてアップロードできるファイルの種類を制限する場合は、これが方法です。

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

次に、上記のボタンのonClickなどのイベントから関数を呼び出すことができます。

onClick = "TestFileType（this.form.uploadfile.value、['gif'、 'jpg'、 'png'、 'jpeg']）;"

あなたはこれを変更することができますPDFし、XLS

あなたはそれがここで実装されているのを見ることができます：デモ