我想限制可以从本机操作系统文件选择器中选择的文件类型,当用户单击HTML中的<input type="file">元素中的Browse按钮时。我感觉这是不可能的,但我想知道是否有解决办法。我希望只使用HTML和JavaScript;请不要用闪光灯。


当前回答

你实际上可以用javascript来做,但记住js是客户端,所以你实际上是“警告用户”他们可以上传什么类型的文件,如果你想避免(限制或限制如你所说)某些类型的文件,你必须在服务器端做它。

如果您想开始服务器端验证,请查看这个基本的tut。对于整个教程,请访问这个页面。

好运!

其他回答

使用带有accept属性的输入标记

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

点击这里查看最新的浏览器兼容性表

现场演示在这里

如果只选择图像文件,可以使用accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示在这里

只有gif, jpg和png将显示,屏幕截图从Chrome 44版

从技术上讲,您可以在input元素上指定accept属性(html5中的另一种选择),但它不受适当支持。

你实际上可以用javascript来做,但记住js是客户端,所以你实际上是“警告用户”他们可以上传什么类型的文件,如果你想避免(限制或限制如你所说)某些类型的文件,你必须在服务器端做它。

如果您想开始服务器端验证,请查看这个基本的tut。对于整个教程,请访问这个页面。

好运!

我知道有点晚了。

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

在前面使用accept属性的回答的基础上,您可以使用File API来完成这个任务。如果您使用FileReader进行一些本地解析或数据处理,这也使您可以访问文件内容。

首先创建一个input元素,这里您可以将文件类型应用于accept属性,但对于示例,它将允许您选择所有文件类型。

<input type="file" name="upload" accept="*" multiple>

接下来,我们需要监听输入元素上的'change'事件。

var upload = document.querySelector('input[type="file"]');
upload.addEventListener('change', function() {});

在函数内部,您将能够访问输入的files对象。

var files = this.files

我们不能只是遍历对象,因为它不是数组,但是我们可以使用item()函数从列表中访问File对象。

for (var i = 0; i < files.length; i++) {
    var file = files.item(i);
}

现在我们有了File对象,我们可以访问它的name和type属性,并在这里进行文件检查。在这种情况下,我检查它是否是一个.txt文件,如果不是,就打印一条消息。您可以根据文件类型的正则表达式模式检查名称,或者根据其MIME类型检查类型。

if (!file.name.match(/.txt$/i) || file.type != 'text/plain') {
    console.log(file.name + ' is not a .txt file.');
}

var upload = document.querySelector('input[type="file"]'); 上传。addEventListener('change', function() { Var files = this.files; For (var I = 0;I < files.length;我+ +){ Var文件= files.item(i); If (!file.name.match(/.txt$/i) ||文件。Type != 'text/plain') { Console.log (file.name + '不是.txt文件。'); } } }); <input type="file" name="upload" accept="*" multiple>

现代浏览器很好地支持文件API。通过将其与accept属性结合使用,您可以轻松地过滤本地用户在上传中可以选择的内容,并提供有用的反馈。如果您正在上传文件,您仍然应该在后端检查并验证文件类型。