如何检查输入类型=“文件”是否选择了文件?

时间:2013-11-29 19:53:42

标签: javascript microsoft-metro file-io

我正在使用VS2012(MetroApp)开发一个带有HTML,JavaScript和CSS3的应用程序

我需要在我的

上添加文件后触发启用或禁用按钮的验证
<input type="file"/>
到目前为止,我有这个:

HTML:default.html:

<!DOCTYPE html>
<html>
<head>
    <title>myApp</title>
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
        <div id="content">
        <h1>myApp</h1>

        <br /><br />
        <button id="imageCaptureButton">Take Picture</button>
        <input type="file" id="uploadCaptureInputFile"/><br />
        <button id="uploadCaptureButton">Subir Foto</button>
        <br /><br />

        <div id="result"></div>
    </div>
</body>
</html>

JavaScript:default.js

function getDomElements() {
    _uploadCaptureButton    = document.querySelector("#uploadCaptureButton");
    _uploadCaptureInputFile = document.querySelector("#uploadCaptureInputFile");        
}

function wireEventHandlers() {
    _uploadCaptureInputFile.addEventListener("onchange", verifyControls, false);
}


app.onloaded = function () {
    getDomElements();
    wireEventHandlers();

    _uploadCaptureButton.disabled = true;
}


function verifyControls() {
    if ( _uploadCaptureInputFile != "") {
        _uploadCaptureButton.disabled = false;
    }
    else {
        _uploadCaptureButton.disabled = true;
    }
}

但我无法让它发挥作用,似乎

_uploadCaptureInputFile.addEventListener("onchange", verifyControls, false);

它不服从,有没有办法将此事件分配给我的inputType以触发此类验证?

提前致谢

1 个答案:

答案 0 :(得分:2)

使用addEventListener收听时,您会收听仅仅"change"而不是"onchange"更改事件。听"onchange"将永远不会触发,因为从未触发匹配事件(除非您自己创建自定义事件)。