如何使用HTML输入文件类型限制文件类型？

How do I restrict file types with the HTML input file type?

如何使用HTML输入文件类型限制文件类型？

I have this

我有这个

<input type="file" id="fileUpload" name="fileUpload" size="23" accept="Calendar/ics"/>

I am trying to restrict the type to only the iCalendar format type.

我试图将类型限制为仅iCalendar格式类型。

I also want to check it on the server side. How do I do this in ASP.NET MVC?

我也想在服务器端检查它。我如何在ASP.NET MVC中执行此操作？

5 个解决方案

#1

Unfortunately, you can't restrict the file extension like you can in a standard file browser dialog. You can, however, check the extension once the user selects a file.

遗憾的是，您无法像在标准文件浏览器对话框中那样限制文件扩展名。但是，您可以在用户选择文件后检查扩展名。

You can add this event handler.

您可以添加此事件处理程序。

filebox.Attributes.Add("onchange", "fileSelectedChanged(this);");

and this JavaScript function

和这个JavaScript函数

function fileSelectedChanged(obj) {
    var filePath = obj.value;

    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
    if(ext != 'csv') {
        alert('Only files with the file extension CSV are allowed');
    } else {
        document.getElementById('form1').submit();
    }
}

You should also check it on the server, using:

您还应该在服务器上检查它，使用：

filebox.PostedFile.FileName

and:

和：

filebox.PostedFile.ContentType

#2

text/calendar is the right mime type

文本/日历是正确的mime类型

<input type="file" id="fileUpload" name="fileUpload" size="23" accept="text/calendar" />

#3

You cannot specify what kind of files the user can choose. You can use Javascript to prevent the user from submitting the form, but that is not good enough. Javascript can be easily disabled within the browser. You need logic on the server-side that evaluates the content-type of the upload (even just checking the file extension is really not good enough)...

您无法指定用户可以选择的文件类型。您可以使用Javascript来阻止用户提交表单，但这还不够好。可以在浏览器中轻松禁用Javascript。你需要服务器端的逻辑来评估上传的内容类型（即使只是检查文件扩展名真的不够好）......

HttpPostedFile file = Request.Files(0);

if(file.ContentType != "text/calendar")
{
    //Error
}

#4

instaed of accept you should use contetypes attribute notice that there is single "t" in contentypes

instaed of accept你应该使用contetypes属性注意内容类型中有单个“t”

and in server code check like this

并在服务器代码检查这样

HttpPostedFileBase file = Request.Files[0];

HttpPostedFileBase文件= Request.Files [0];

if(!file.ContentType.startsWith("text/calendar")) { //Error }

if（！file.ContentType.startsWith（“text / calendar”））{//错误}

hope this will sove your problem Mark my answer if it will.

希望这能解决你的问题。如果愿意，请记下我的答案。

#5

I personally prefer something like Uploadify which lets you do this, and also provides a fancy progress bar... I don't know if that's a bit too "heavy weight" for you though.

我个人更喜欢像Uploadify这样的东西让你这样做，并且还提供了一个花哨的进度条...我不知道这对你来说是否有点过于“沉重”。