文件类型的onchange jQuery验证 [英] onchange jquery validation for file type
问题描述
这是我的小提琴
在onchange事件中，我要在上传文本附近显示图像名称.
What i have is to display the image name near the upload text in the onchange event.
这里我需要对onchange进行验证，它应该显示错误以及文件名
Here i need to have the validation on the onchange and it should display the error along with the file name
这是我尝试过的.
Upload<input type="file" onchange=" document.getElementById('spanFileName').innerHTML = this.value;" style="display:block;margin-top: -20px;opacity: 0;" >
注意:
我不想通过设置规则来单独进行验证，我想在onchange中进行验证，但是如果我将脚本包含在输入类型文件代码中就可以了
I don't want to do the validation in a seperate by setting rules, i want to do it in onchange, but it will be ok if i have the script inside the input type file code
更新:如果我要在5秒内显示和隐藏文件名，那会更好，因为我不知道在输入类型文件代码中编写脚本
Update : It will be better if i have the file name to be displayed and hide in 5 seconds, as i don't know to write script inside the input type file code
我该怎么做，请帮助
推荐答案
<!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 jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
