135

使用しました<input type= "file" name="Upload" >

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

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

また、Webページのファイル（PDF / XLS）をクリックすると、自動的に開きます。

誰かがこれのいくつかの例を挙げてもらえますか？

4

9 に答える 9

241

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

例：

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

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

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

于 2012-08-27T13:10:00.933 に答える
19

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

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

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

を使用しcfinputて検証を実行すると、送信時にファイル拡張子を確認できますが、MIME タイプは確認できません。これは優れていますが、それでも絶対確実というわけではありません。OSX 上のファイルには多くの場合、ファイル拡張子がないか、ユーザーがファイルの種類に悪意を持って誤ったラベルを付ける可能性があります。

ColdFusionは、結果 ( )cffileのプロパティを使用して MIME タイプを確認できますが、これはアップロード後にのみ行うことができます。これが最善の策ですが、MIME タイプが間違っている可能性があるため、100% 安全というわけではありません。contentTypecffile.contentType

于 2012-08-27T13:12:46.753 に答える
14

次の方法を試すことができます

<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

または (asp.net mvc 内)

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })
于 2020-10-07T14:39:38.547 に答える
3

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

于 2012-08-27T13:36:25.287 に答える
1

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

<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

ここで実装されているのを見ることができます:デモ

于 2012-08-27T13:10:03.800 に答える
1

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

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

/download/ でファイルを操作する限り、これは Javascript の問題ではなく、サーバーの設定の問題です。ユーザーが PDF または XLS ファイルを開くために何かをインストールしていない場合は、それらをダウンロードするしかありません。

于 2012-08-27T13:10:31.013 に答える