Question

我有以下代码只选择excel文件。检查FIDDLE中的功能。它在小提琴中运作良好。但是当在本地保存在记事本中时，此代码无效。 没有使用jQuery 。纯JavaScript。

以下是我在记事本中使用的方法。

<html>
<head>
    <script type="text/javascript">
        var file = document.getElementById('browse');

        file.onclick = function(e) {
            var ext = this.value.match(/\.([^\.]+)$/)[1];
            switch (ext) {
                case 'xls':

                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                case 'xlsx':
                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                default:
                    document.getElementById('new').innerHTML = 'Please choose .xls or .xlsx file';
                    document.getElementById('button').disabled = true;

            }
        };
    </script>
</head>

<body>
    <input type='file' id="browse" name="browse" />
    <input type="submit" value="Import" id="button" disabled>
    <p id="new"></p>
</body>
</html>

Answer 1

请检查此代码http://jsfiddle.net/g6KRq/9/

<input type='file' id="browse" name="browse" onchange="checke(this)" />
<input type="submit" value="Import" id="button" disabled>
<p id="new"></p>
<script>
    function checke(e) {
        var ext = e.value.match(/\.([^\.]+)$/)[1];

        switch (ext) {
            case 'xls':

                document.getElementById('button').disabled = false;
                document.getElementById('new').innerHTML = '';
                break;
            case 'xlsx':
                document.getElementById('button').disabled = false;
                document.getElementById('new').innerHTML = '';
                break;
            default:
                document.getElementById('new').innerHTML = 'Please choose                   .xls or .xlsx file';
                document.getElementById('button').disabled = true;

        }
    };
</script>

Answer 2

请使用onchange http://jsfiddle.net/g6KRq/4/。

正如@teddy所指出的，脚本块应该低于<input>元素。

    <html>
<head>
</head>
<body>
    <input type='file' id="browse" name="browse" />
    <input type="submit" value="Import" id="button" disabled>
    <p id="new"></p>
    <script type="text/javascript">
        var file = document.getElementById('browse');

        file.onchange = function(e) {
            var ext = this.value.match(/\.([^\.]+)$/)[1];
            switch (ext) {
                case 'xls':
                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                case 'xlsx':
                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                default:
                    document.getElementById('new').innerHTML = 'Please choose .xls or .xlsx file';
                    document.getElementById('button').disabled = true;

            }
        };
    </script>
</body>
</html>

虽然我们在这，但为什么不去寻找并设置accept属性？

<input type='file' id="browse" name="browse" accept=".xls,.xlsx"  />
<input type="submit" value="Import" id="button" disabled>
<p id="new"></p>

Answer 3

我建议使用onchange而不是onclick事件。 onclick事件可能表现得有些奇怪，如果用户选择相同的文件，则不需要触发事件。

此外，有一种更简单的方法可以检测文件扩展名：

var ext = this.value.split('.').pop();

我相应地更新了您的JSFiddle：

var file = document.getElementById('browse');

file.onchange = function (e) {
    var ext = this.value.split('.').pop();
    switch (ext) {
        case 'xls':
            document.getElementById('button').disabled = false;
            document.getElementById('new').innerHTML = '';
            break;
        case 'xlsx':
            document.getElementById('button').disabled = false;
            document.getElementById('new').innerHTML = '';
            break;
        default:
            document.getElementById('new').innerHTML = 'Please choose                   .xls or .xlsx file';
            document.getElementById('button').disabled = true;
    }
};

这应该按预期工作。

Answer 4

Javascript块应始终包含在body标记结束之前，以便它不会阻止您的网页。单击事件会在单击按钮时触发事件，并且在完成选择文件之前该事件将结束。所以，你应该使用“onchange”事件

<!DOCTYPE HTML>

<body>
    <input type="file" id="browse" name="browse" />
    <input type="submit" value="Import" id="button" disabled>
    <p id="new"></p>
    <script type="text/javascript">
        var file = document.getElementById("browse");
        file.onchange = function(e) {
            var ext = file.value.match(/\.([^\.]+)$/)[1];
            switch (ext) {
                case 'xls':
                case 'xlsx':
                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                default:
                    document.getElementById('new').innerHTML = 'Please choose .xls or .xlsx file';
                    document.getElementById('button').disabled = true;
            }
        };
    </script>
</body>

</html>

Answer 5

问题是：＆＃34;你在哪里放置脚本代码？＆＃34;

首先，你的本地和小提琴之间的主要区别是＆＃34;脚本＆＃34;阻止位置：

在您的本地，您的脚本将置于头部
在小提琴上，脚本放在载荷上

所以，如果你改变脚本＆＃34; Frameworks＆amp;扩展＆＃34;在小提琴中，没有包裹 - ＃34;你会遇到同样的问题。

要在您的本地修复此问题，您必须将脚本放在＆＃34;浏览＆＃34;块。

即

<html>

<head>

</head>

<body>
    <input type='file' id="browse" name="browse" />
    <input type="submit" value="Import" id="button" disabled>
    <p id="new"></p>
    <script type="text/javascript">
        var file = document.getElementById('browse');

        file.onclick = function(e) {
            var ext = this.value.match(/\.([^\.]+)$/)[1];
            switch (ext) {
                case 'xls':

                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                case 'xlsx':
                    document.getElementById('button').disabled = false;
                    document.getElementById('new').innerHTML = '';
                    break;
                default:
                    document.getElementById('new').innerHTML = 'Please choose .xls or .xlsx file';
                    document.getElementById('button').disabled = true;

            }
        };
    </script>
</body>
</html>

更多信息，你应该知道方法document.getElementById只找到生成的元素。所以在head标签中，没有＆＃34;浏览＆＃34;元素发现。你可能对jQuery onLoad太熟悉了，所以忘了这些基本的。

代码在jsfiddle中正常工作，但在本地保存时则不行

5 个答案: