在提交之前验证xml文件是否为javascript文件


Validate that a xml file is a file with javascript before submitting

假设我有一个xml文件,我想通过html表单使用php上传,但我想首先验证xml文件是使用javascript的实际文件。我有一个表单,只有一个输入和这段javascript代码:

function Validate(form) {
var _validFileExtensions = [".xml"];
var arrInputs = form.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
    var oInput = arrInputs[i];
    if (oInput.type == "file") {
        var sFileName = oInput.value;
        if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
            if (!blnValid) {
                alert(oInput.type);
                //alert("Lo siento, " + sFileName + " es invalido, la única extensión permitida es: " + _validFileExtensions.join(", "));
                return false;
            }
        }
    }else{
        alert(oInput.type);
        //alert("Tienes que seleccionar un archivo");
        return false;
    }
}
return false;
}

我只是把这一块来描述这个问题,这是文件。xml不是一个文件,是空的,如果我试图提交任何类型的文件,我可以在我的计算机上找到,像"javascript.js","newdocument.txt"或任何类型的文件,javascript"文件。输入"确实匹配"文件",但如果我提交一个"file.xml",它会提示"提交",同样的事情,如果我点击提交没有选择任何文件。这使我相信。xml文件被视为某种指令或其他东西。

我知道我也必须验证服务器端和东西,但现在我想验证客户端使用javascript,所以,有没有一种方法来验证"文件。xml"是一个文件?

EDIT:(添加完整代码和提琴)
HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
        <title>XML a PDF</title>
        <script type="text/JavaScript" src="javita.js"></script>
    </head>
     <body>
            <form action="transforma.php" method="post"  mimetype="text/xml" enctype="text/xml" onsubmit="return Validate(this);" name="transforma">
            <label for="file">Filename: </label>
            <input type="file" name="file" id="file"><br>
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>

也试过:

<form action="transforma.php" method="post"  enctype="multipart/form-data" onsubmit="return Validate(this);" name="transforma">

相同的结果

小提琴

如果你还没有意识到这一点,那么你所做的假设完全是在错误的方向上。

首先,javascript在这里对字符串的内容没有区别。它只是对一个字符串进行操作。无论该字符串是否包含"I hate you javascript, go home""this-file-extension-is-better-than-others.txt"或您丢失的"file.xml" -它将始终在这里工作相同。

看你两天前的评论:

我更感兴趣的是知道为什么xml文件不被javascript识别为文件,或者我如何完成javascript来识别xml文件作为文件。

所以我让你知道:XML文件被javascript识别为文件。

在我向你介绍了这些知识之后(我希望你也能敞开心扉接受这些知识,因为它解决了你的大部分问题),然后让我们看看这里发生了什么。

首先,你一次做的事情太多了。例如,您希望获得文件输入元素。由于它没有ID,您可以遍历所有输入。这是不必要的。如果问题是元素不能很好地识别,给表单一个ID,这样你就可以:
form.id || (form.id = "id".concat(+new Date, parseInt(Math.random() * Math.pow(10, 16))));
var fileName = document.querySelector("#".concat(form.id, " input[type=file]")).value;

。这是文件名的字符串。如果您验证这一点,您可以很容易地看到它总是包含文件名。如果尚未选择,它是一个空字符串,如果选择,它是文件名的"fakepath"字符串。至少在这一点上,您必须意识到它总是一个字符串,无论您选择了哪个文件。

接下来,您应该创建一个函数,根据白名单验证文件名的扩展名。这样做的好处是,你可以在任何字符串上使用它,无论你从哪里得到它:

var fileExtension = function (file) {
    var extensions = [".xml"];
    var match;
    extensions.every(function (extension) {
        var e = /([.*+?^=!:${}()|'[']'/''])/g;
        if (new RegExp(extension.replace(e, "''$1") + '$', 'i').test(file)) {
            match = extension;
            return false;
        }
        return true;
    });
    return match;
}

这样做后,您可以很容易地验证表单,看看这个工作小提琴:http://jsfiddle.net/JZj85/

这并非万无一失,但你可以试试:

function validate(form) {
    var file = form.getElementsByTagName("input")[0];
    var ext = file.value.substring(file.value.lastIndexOf('.'));
    if (ext == "xml") {
        // Do something when it is an xml file
    } else {
        // Do something else when it is not
    }
    return false
}

.getElementsByTagName返回一个元素数组。您需要第一个,因为它是您的文件输入。
var ext = ...得到扩展,或者至少是最后一个.(包括)背后的东西。但是用户仍然可以上传另一种文件类型,但只需更改扩展名,因此您也需要一些服务器端验证。

看到小提琴