我想限制可以从本机操作系统文件选择器中选择的文件类型,当用户单击HTML中的<input type="file">元素中的Browse按钮时。我感觉这是不可能的,但我想知道是否有解决办法。我希望只使用HTML和JavaScript;请不要用闪光灯。
当前回答
你实际上可以用javascript来做,但记住js是客户端,所以你实际上是“警告用户”他们可以上传什么类型的文件,如果你想避免(限制或限制如你所说)某些类型的文件,你必须在服务器端做它。
如果您想开始服务器端验证,请查看这个基本的tut。对于整个教程,请访问这个页面。
好运!
其他回答
在前面使用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属性结合使用,您可以轻松地过滤本地用户在上传中可以选择的内容,并提供有用的反馈。如果您正在上传文件,您仍然应该在后端检查并验证文件类型。
您可以在文件选择框中使用“accept”属性作为过滤器。 使用“accept”可以帮助您根据“后缀”或“MIME类型”过滤输入文件
1.基于后缀的过滤: 这里的“accept”属性只允许选择扩展名为。jpeg的文件。
<input type="file" accept=".jpeg" />
2.基于“文件类型”的过滤器 这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。
<input type="file" accept="image/jpeg" />
重要提示:我们可以更改或删除文件的扩展名,而不改变模因类型。例如,可以有一个没有扩展名的文件,但该文件的类型可以是“image/jpeg”。所以这个文件不能通过accept=".jpeg"过滤器。但是它可以传递accept="image/jpeg"。
3.我们可以使用*来选择各种文件类型。例如下面的代码允许选择所有类型的图像。例如"image/png"或"image/jpeg"或... .所有这些都是允许的。
<input type="file" accept="image/*" />
4.我们可以在select属性中使用cama(,)作为“或操作符”。例如,允许所有类型的图像或pdf文件,我们可以使用以下代码:
<input type="file" accept="image/* , application/pdf" />
我知道有点晚了。
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属性之外,它是最接近客户端的。
var file = document.getElementById('someId'); 文件。Onchange =函数(e) { Var ext = this.value.match(/\.([^\.]+)$/)[1]; Switch (ext) { 例“jpg”: 例“bmp”: 例“png”: 气管无名动脉瘘管的情况下“”: 警报(允许的); 打破; 默认值: 警报(“不允许”); 这一点。Value = "; } }; <input type="file" id="someId" />
JSFiddle
你实际上可以用javascript来做,但记住js是客户端,所以你实际上是“警告用户”他们可以上传什么类型的文件,如果你想避免(限制或限制如你所说)某些类型的文件,你必须在服务器端做它。
如果您想开始服务器端验证,请查看这个基本的tut。对于整个教程,请访问这个页面。
好运!
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在Python中获得所有直接子目录
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- 即使模板文件存在,Flask也会引发TemplateNotFound错误
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 纬度和经度的数据类型是什么?
- 如何在Ruby中创建文件