我使用了<input type= "file" name="Upload" >
现在我想通过只接受.pdf和.xls文件来限制它。
当我点击提交按钮时,它应该验证这一点。
当我点击网页上的文件(PDF / XLS)时,它会自动打开。
有人可以举一些这方面的例子吗?
答案 0 :(得分:126)
您可以使用属性accept
并向其添加允许的mime类型来执行此操作。但并非所有浏览器都尊重该属性,并且可以通过某些代码检查器轻松删除它。因此,在任何一种情况下,您都需要检查服务器端的文件类型(第二个问题)。
示例:
<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />
关于你的第三个问题“当我点击网页上的文件(PDF / XLS)时,它会自动打开。”:
你无法做到这一点。如何在客户端计算机上打开PDF或XLS由用户设置。
答案 1 :(得分:26)
你可以用这个:
<强> HTML 强>
<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />
仅支持。 PDF 和。 XLS 文件
答案 2 :(得分:9)
不幸的是,在选择时没有保证可以做到这一点。
某些浏览器支持accept
标记的input
属性。这是一个良好的开端,但不能完全依赖。
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
您可以使用cfinput
并运行验证以在提交时检查文件扩展名,但不会检查mime类型。这样更好,但仍然不是万无一失。 OSX上的文件通常没有文件扩展名,或者用户可能会恶意错误地标记文件类型。
ColdFusion的cffile
可以使用结果的contentType
属性检查mime类型(cffile.contentType
),但这只能在上传后完成。这是你最好的选择,但仍然不是100%安全,因为mime类型可能仍然是错误的。
答案 3 :(得分:4)
您可以尝试以下方式
Partition
或(在asp.net mvc中)
Data
答案 4 :(得分:2)
您可以使用JavaScript。请注意,使用JavaScript执行此操作的一个大问题是重置输入文件。嗯,这仅限于JPG(对于PDF,您必须更改mime type和magic number):
<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上测试的。
答案 5 :(得分:1)
虽然这个特定示例适用于多文件上传,但它提供了所需的一般信息:
https://developer.mozilla.org/en-US/docs/DOM/File.type
就在/ download /上执行文件而言,这不是一个Javascript问题 - 而是一个服务器配置。如果用户没有安装某些东西来打开PDF或XLS文件,他们唯一的选择就是下载它们。
答案 6 :(得分:1)
我会过滤文件服务器端,因为有些工具,例如Firefox上的Live HTTP Headers,可以上传任何文件,包括shell。人们可以破解你的网站。做它服务器站点,是安全的。
答案 7 :(得分:0)
如果您希望文件上传控件限制用户可以在按钮上上传的文件类型,那么就是这样..
<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
您可以在此处看到它已实施:Demo
答案 8 :(得分:0)
试试这个:-
<MyTextField
id="originalFileName"
type="file"
inputProps={{ accept: '.xlsx, .xls, .pdf' }}
required
label="Document"
name="originalFileName"
onChange={e => this.handleFileRead(e)}
size="small"
variant="standard"
/>