文件类型的onchange jquery验证答案

【问题标题】：onchange jquery validation for file type文件类型的onchange jquery验证
【发布时间】：2014-11-21 06:04:13
【问题描述】：

这是我的Fiddle

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

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

这是我尝试过的。

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

注意：

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

更新：如果我能在 5 秒内显示和隐藏文件名会更好，因为我不知道在输入类型文件代码中编写脚本

我该怎么做，请帮忙

【问题讨论】：

您需要在 5 秒后隐藏文件名吗？
是的，但我也想在那里进行文件类型验证？

标签： javascript jquery validation

【解决方案1】：

<!doctype html>
<html lang="en">    
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  <style type="text/css">
  label input[type="file"] 
{
display: block;
margin-top: -20px;
opacity: 0;
}
  </style>
  <script>
   $(window).ready(function() {
$(document).delegate('#Upload','change',function(){
  var s=$(this).val();
  function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}
$('#spanFileName').html(s);
setTimeout(function(){

  $('#spanFileName').html("");
},15000)

String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }
  alert(s);
   if (!stringEndsWithValidExtension($("[id*='Upload']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});
});

  </script>
</head>
<body>
Upload<input id='Upload' type="file" style="display:block;margin-top: -20px;opacity: 0;" >

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

【讨论】：

谢谢，但我可以在 onchange 事件中有一个条件，比如 document.getElementById(\'spanFileName\').if(innerHTML==.jpg) = print this.value;像这样
@BizDevB 看我的回答
谢谢，接受您的回答。如果我的问题有效，请投票

【解决方案2】：

使用 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/

【讨论】：