Javascript 验证阵列中的文件扩展名
我在网上搜索过,所以我自己用很多不同的方法找到了这个答案,但没有成功 我想以与“outpush.push”语句相同的方式显示一条消息,说明文件扩展名是否被接受 这需要从接受的文件扩展名数组(如JPG、PNG、GIF)中获取,并检测文件扩展名是否为大写并接受(将其转换为小写) 这是我的剧本。我想知道在脚本中如何以及在哪里实现这样的功能Javascript 验证阵列中的文件扩展名,javascript,Javascript,我在网上搜索过,所以我自己用很多不同的方法找到了这个答案,但没有成功 我想以与“outpush.push”语句相同的方式显示一条消息,说明文件扩展名是否被接受 这需要从接受的文件扩展名数组(如JPG、PNG、GIF)中获取,并检测文件扩展名是否为大写并接受(将其转换为小写) 这是我的剧本。我想知道在脚本中如何以及在哪里实现这样的功能 function handleFileSelect(evt) { var files = evt.target.files; // FileList ob
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var max_size = 5120; // Max file size
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong><font size="3" color="FFFFFF">FILE: ', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</font></li>');
if(f.size > max_size) {
output.push('<font size="5" color="FFFF00"><b>ERROR!! Sorry, but the file that you selected is too large. Please upload a file that is no larger than ' + max_size + ' KB.');
}
if(f.size < max_size) {
output.push('<font size="5" color="FFFF00"><b>FILE SIZE OK. CLICK TO SEND button below.</font>');
output.push('<font size="5" color="FFFFFF"><hr><b>IMPORTANT: Do not close this window. Wait till you see the next page when finished uploading your file.</font>');
document.getElementById("myButton").style.display="all";
}
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
功能手柄文件选择(evt){
var files=evt.target.files;//文件列表对象
var max_size=5120;//最大文件大小
var输出=[];
for(var i=0,f;f=files[i];i++){
output.push(“文件:”,escape(f.name),“(”,f.type | | |“n/a”,“)-”,
f、 大小,'字节,上次修改:',
f、 lastModifiedDate?f.lastModifiedDate.toLocaleDateString():“不适用”,
“ ”);
如果(f.尺寸>最大尺寸){
output.push('ERROR!!抱歉,您选择的文件太大。请上载一个不大于'+max_size+'KB'的文件);
}
如果(f.尺寸<最大尺寸){
push('文件大小确定。单击下面的发送按钮');
output.push(“
重要提示:不要关闭此窗口。请等到上传完文件后看到下一页。”);
document.getElementById(“myButton”).style.display=“all”;
}
}
document.getElementById('list').innerHTML=''+output.join('')+'
';
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
您可以将阵列设置为如下所示:
var file_types = {'jpg', 'png', 'gif'};
然后在for循环中执行类似的操作
if ($.inArray(f.ext, file_types) == -1) {
output.push('<font size="5" color="FFFF00"><b>ERROR!! Incorrect file type! Accepted file types are : jpg, png, gif</b></font>');
}
if($.inArray(f.ext,文件类型)=-1){
output.push('ERROR!!文件类型不正确!接受的文件类型为:jpg、png、gif');
}
更多有关的阅读。您可以尝试两种方法中的一种-尝试抓取扩展并将其与允许的扩展数组或正则表达式进行匹配
var accepted_types = ['jpg', 'gif', 'png'];
if (accepted_types.indexOf(f.ext) > 0) {
output.push(...);
}
var file_list = $("<ul></ul>");
for (var i = 0, f; f = files[i]; i++) {
// work goes here, simply append the list elements into file_list
file_list.append($("<li>" ... "</li>"));
}
// to append your new list to id="list"
$("#list").append(file_list);
// or to replace the html with your new html
$("#list").html(file_list.html());
var文件列表=$(“
”);
for(var i=0,f;f=files[i];i++){
//这里的工作是,只需将列表元素附加到文件列表中即可
文件列表追加($(“”..“ ”);
}
//将新列表附加到id=“list”
$(“#列表”)。追加(文件列表);
//或者用新的html替换html
$(“#list”).html(文件_list.html());
您的代码有几个问题
1) 您应该使用一个if-else
,而不是多个if
语句:
if (f.size > max_size) {
// ...
} else {
// ...
}
2) all
不是display
的有效值,请使用block
或inline
:
document.getElementById("myButton").style.display = "block";
3) 您正在使用过时的
标记。相反,使用样式和CSS。在您的情况下,我会使用类,一个用于msg
,另一个用于error
,important
和ok
的类
4) 要执行数组检查,只需使用indexOf()
:
var扩展=[“jpg”、“jpeg”、“txt”、“png”];//全球定义
...
//获取扩展名并使其小写
//这使用一个regex替换来删除所有直到
//包括最后一个点
var extension=f.name.replace(/.*\./,'').toLowerCase();
未找到if(extensions.indexOf(extension)<0{//
output.push(“error!!很抱歉,您选择的文件不是有效的文件类型。有效的文件类型为:”,有效“ ”);
}否则。。。
演示:jQuery在哪里?所有这些看起来都像是基本的JavaScript。你说得对。我将编辑我的问题。我想是的。下面已经有了答案,但我要补充的是,你有
if(f.size>max\u size)
和if(f.size
。第二个应该是else
语句。另外,如果f.size==max\u size
,您将不会收到任何消息。@JeffB-我去掉了一条语句并替换为另一条,但仍然没有成功。我无法指出它失败的地方。请参阅下面我的答案。在我的例子中,它似乎是有效的。其他答案对于香草javascript来说是很好的。我会保留这个答案以供参考
var extensions = ["jpg", "jpeg", "txt", "png"]; // Globally defined
...
// Get extension and make it lowercase
// This uses a regex replace to remove everything up to
// and including the last dot
var extension = f.name.replace(/.*\./, '').toLowerCase();
if (extensions.indexOf(extension) < 0) { // Wasn't found
output.push('<li class="msg error">ERROR!! Sorry, but the file that you selected is not a valid file type. Valid types are: ', valid, '</li>');
} else ...