用于插入特定名称文件的Javascript验证_Javascript_Jquery_Asp.net_Validation_File Upload

用于插入特定名称文件的Javascript验证

javascript jquery asp.net validation file-upload

用于插入特定名称文件的Javascript验证,javascript,jquery,asp.net,validation,file-upload,Javascript,Jquery,Asp.net,Validation,File Upload,我想在Javascript中验证，文件名应该是特定类型的，应该像示例一样上传我有一个fileupload控件，它具有上载多个文件的功能这是它的html <asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" onchange="return ValidateFileType(this);" /> 您可以使用有效文件名的对象检查文件名，还需要知道哪个选项卡处于活动状态。您可以使用以下代码 var

我想在

Javascript

中验证，文件名应该是特定类型的，应该像示例一样上传

我有一个fileupload控件，它具有上载多个文件的功能

这是它的html

<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" onchange="return ValidateFileType(this);" />

您可以使用有效文件名的对象检查文件名，还需要知道哪个选项卡处于活动状态。您可以使用以下代码

var Tabtype = document.getElementById('hdnType').value; 

if (Tabtype == "Panaromic") { 
    var validFileName = { 
         "120.jpg": 1, "150.jpg": 1, "180.jpg": 1, "210.jpg": 1, "240.jpg": 1, 
    } 
} 

if (Tabtype == "Satellite") { 
    var validFileName = { 
          "55.jpg": 1, "74.jpg": 1, "83.jpg": 1, "935.jpg": 1, 
    } 
} 

if (Tabtype == "SitePlot") { 
    var validFileName = 0; 
}


if (path != "") {
   if(validFileName && !isFileNameValid(path)){
       jAlert("Invalid File. Please upload a File with extension " + 
       ValidImageFileExtension.join(", "), "Information");
       uploadControl.value = '';
       isCValidFile = false;
       break;
   }
   ...

在示例html中复制粘贴下面的代码。希望它能像你期望的那样工作

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title></title>
    </head>
    <body>  
      <label for="file">Filename:</label>
        <input type="file" name="filename" id="filename" onchange="ValidateFileType();" multiple="multiple"/> 
    </body>


<script>
function ValidateFileType() {

var ext_names = ["jpg", "png", "jpeg"];

    try {
        var uploadControl = document.getElementById('filename');
        var isCValidFile = false;

        for (var i = 0; i < uploadControl.files.length; i++) {
            isCValidFile = false;
            var path = uploadControl.files[i].name;
            var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
            alert(path);
            if (path != "") {

            alert(ext);
                    if (ext_names.indexOf(ext) > -1) {
                        isCValidFile = true;    
                       // break;
                    }

                if (!isCValidFile) {
                    alert("Invalid File. Please upload a File with extension " + ext_names.join(", "), "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
                else if (uploadControl.files[i].size > 15728640) {
                    alert("Please check file size should be less than 15 MB.", "Information");
                    uploadControl.value = '';
                    isCValidFile = false;
                    break;
                }
            }
            else {
                alert("Please select File", "Information");
                isCValidFile = false;
                break;
            }
        }

        return isCValidFile;

    } catch (e) {
        isCValidFile = false;
        alert("Error occurred on validate file.", "Error");
        return isCValidFile;
    }
}
</script>


    </html>


文件名：
函数ValidateFileType（）{
var ext_names=[“jpg”、“png”、“jpeg”]；
试一试{
var uploadControl=document.getElementById（'filename'）；
var IsValidFile=false；
对于（var i=0；i-1）{
IsValidFile=true；
//中断；
}
如果（！isValidFile）{
警报（“无效文件。请上载扩展名为“+ext_names.join”（“，”）的文件，信息”）；
uploadControl.value=''；
IsValidFile=false；
打破
}
else if（uploadControl.files[i].size>15728640）{
警告（“请检查文件大小是否应小于15 MB。”，“信息”）；
uploadControl.value=''；
IsValidFile=false；
打破
}
}
否则{
警报（“请选择文件”、“信息”）；
IsValidFile=false；
打破
}
}
返回有效文件；
}捕获（e）{
IsValidFile=false；
警报（“验证文件时出错。”，“错误”）；
返回有效文件；
}
}

请尝试此代码

如果只想验证特定的文件名，很容易。不需要检查分机。但是，如果您想使文件名唯一，可以在后端执行此操作

function ValidateFileType(controlName) {
  try {
       var uploadControl = controlName;
       var isCValidFile = false;
       var validFileNames = ["120.jpg","150.jpg","180.jpg","210.jpg","240.jpg"]

       for (var i = 0; i < uploadControl.files.length; i++) {
           var file = uploadControl.files[i];
           var fileName = file.name.split(/(\\|\/)/g).pop().toLowerCase();
           if (validFileNames.indexOf(fileName) < 0) {
              jAlert("Invalid file name, please select etc...",  "Information");
           }
           else if (file.size > 15728640) {
                   jAlert("Please check file size should be less than 15 MB.",  "Information");
           }
           else {
               isCValidFile = true;
           }

           if(!isCValidFile)
               uploadControl.value = '';
       }

       return isCValidFile;

   } catch (e) {
       uploadControl.value = '';
       jAlert("Error occurred on validate file.", "Error");
       return false;
   }
}

函数ValidateFileType（controlName）{
试一试{
var uploadControl=controlName；
var IsValidFile=false；
var validFileNames=[“120.jpg”、“150.jpg”、“180.jpg”、“210.jpg”、“240.jpg”]
对于（var i=0；i15728640）{
jAlert（“请检查文件大小是否应小于15 MB。”，“信息”）；
}
否则{
IsValidFile=true；
}
如果（！isValidFile）
uploadControl.value=''；
}
返回有效文件；
}捕获（e）{
uploadControl.value=''；
jAlert（“验证文件发生错误。”，“错误”）；
返回false；
}
}

实际上，我会在这里做两件事中的一件。为jQuery验证插件编写自定义适配器或编写自定义jQuery插件

我通常使用，因此我会根据自己的需要编写自定义适配器。这是有益的，因为一旦编写，我就可以反复使用规则，并可以通过更改Html元素的属性来配置它们。它还具有动态显示错误消息和禁用表单提交的优点，无需我的交互

下面是一个使用Jquery验证的工作示例：

$（文档）.ready（函数（）{
$.validator.addMethod（“文件计数”，函数（值、元素、参数）{
var maxcount=params；
如果（最大计数）{
返回$（元素）[0].files.length 1048576000）{
maxval=defaultmaxfilesize；
}否则{
maxval=parsedmaxval；
}
var files=el[0]。文件；
如果（files！=null&&files.length>0）{
对于（var i=0；i



$（文档）.ready（函数（）{
$（'input[type=“file”]”）。更改（函数（）{
var el=$（本）；
如果（！el.valid（））el.val（“”）；
});
});
您已经在文件
数组中找到了循环，所以您需要做的就是获取文件名，然后检查它是否与您允许的任何值匹配。@Rorymcrossan:您能建议如何在循环中绑定这些名称吗accordinlgy@RoryMcCrossan：我很困惑。请帮助您是要使文件名唯一还是仅使文件名唯一作为预先确定的名称？@MehmetOtkun:该文件具有预先确定的名称。正如我所给出的名称是specificusecatch（e）{console.log（e）；
使用google chrome inspector查找问题获取错误，因为无法获取未定义或空引用的属性“split”
请在获取path变量的位置添加断点，并检查它为什么为空或未定义。您可以删除该循环，因为您已在函数中检查了文件名和扩展名N
function ValidateFileType(controlName) {
  try {
       var uploadControl = controlName;
       var isCValidFile = false;
       var validFileNames = ["120.jpg","150.jpg","180.jpg","210.jpg","240.jpg"]

       for (var i = 0; i < uploadControl.files.length; i++) {
           var file = uploadControl.files[i];
           var fileName = file.name.split(/(\\|\/)/g).pop().toLowerCase();
           if (validFileNames.indexOf(fileName) < 0) {
              jAlert("Invalid file name, please select etc...",  "Information");
           }
           else if (file.size > 15728640) {
                   jAlert("Please check file size should be less than 15 MB.",  "Information");
           }
           else {
               isCValidFile = true;
           }

           if(!isCValidFile)
               uploadControl.value = '';
       }

       return isCValidFile;

   } catch (e) {
       uploadControl.value = '';
       jAlert("Error occurred on validate file.", "Error");
       return false;
   }
}