javascript - onchange jquery 文件类型验证

Question

这是我的 Fiddle

我所要做的是在 onchange 事件中的上传文本附近显示图像名称。

这里我需要对 onchange 进行验证，它应该显示错误以及文件名

这是我尝试过的。

Upload<input type="file" onchange=" document.getElementById('spanFileName').innerHTML = this.value;" style="display:block;margin-top: -20px;opacity: 0;" >

注意:

我不想通过设置规则单独进行验证，我想在 onchange 中进行验证，但如果我在输入类型文件代码中包含脚本就可以了

更新:如果我有要在 5 秒内显示和隐藏的文件名，那就更好了，因为我不知道在输入类型文件代码中编写脚本

我该怎么做，请帮忙

Answer 1

使用 JQuery 解决方案非常简单

将 HTML 设置为

Upload<input type="file" id="fileUpload" style="display:block;margin-top: -20px;opacity: 0;" >

<span id='spanFileName'></span>

然后使用 Jquery

$('#fileUpload').on("change",function () {

                var fileExtension = ['jpeg', 'jpg'];
                if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                    // alert("Only '.jpeg','.jpg' formats are allowed.");
                    $('#spanFileName').html(this.value);
                    $('#spanFileName').html("Only '.jpeg','.jpg' formats are allowed.");
                }
                else {
                    $('#spanFileName').html(this.value);
                   //do what ever you want
                } 
 }) 

这是工作示例 http://jsfiddle.net/c9sbmdv5/3/