Question
I am checking the file size and extension of a file before it is uploaded, and (for the most part) the code is running correctly. However, I am unable to remove the disabled attribute from the submit button if the file has the correct extension and is under 2MB. I feel as if there is something minor I am not seeing or forgetting. I would appreciate any help or tips.
Thanks,
-Kyle
Here is my code:
https://stackoverflow.com/questions/21102573
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<p>Select a logo to upload</p>
<input type="file" id="uploadFile" class="upload" name="upfile"><br>
<input type="submit" id="uploadSubmit" value="Upload Image" disabled="disabled">
document.getElementById("uploadFile").addEventListener("change", checkFile, true);
function checkFile(e) {
var files = e.target.files;
for (var i = 0, file; file = files[i]; i++) {
var fileName = file.name;
var fileExt = fileName.split(".")[fileName.split(".").length - 1].toLowerCase();
var fileSize = document.getElementById("uploadFile").files[0].size;
var fileSizeMB = (file.size / 2097152).toFixed(2);
if (!(fileExt === "jpg" || fileExt === "eps" || fileExt === "tif" || fileExt === "tiff") || fileSize > 2097152) {
alert("There is an error with the file you selected. Please check the file size and/or the file type.");
} else {
$("#uploadSubmit").prop("disabled", false);
}
}
};
Solution 2
Sorry I can't just comment because it requires at least 50 reputation, wtf!
check if you have jQuery, I notice you're using getElementById at the beginning and somehow you're using jQuery selector for uplaodSubmit. Other than that, syntax looks correct to me.
And if you want to stick with pure JS, use:
document.getElementById('uploadSubmit').disabled = false
instead.
Good Luck.
OTHER TIPS
Try
$("#uploadSubmit").removeAttr("disabled");
Hope it helps.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
</head>
<script>
$(function() {
$('#uploadFile').bind('change', function() {
var filename = this.files[0].name.toLowerCase();
if ((filename.indexOf(".jpg") > -1)
|| (filename.indexOf(".png") > -1)) {
if(this.files[0].size<2000000){
$("#uploadSubmit").removeAttr("disabled");
alert("This is your solution");
}else{
alert("You cant get bigger than 2 MB");
}
} else {
alert("File format must jpg or png");
return false;
}
});
});
</script>
<body>
<p>Select a logo to upload</p>
<input type="file" id="uploadFile" class="upload" name="upfile"><br>
<input type="submit" id="uploadSubmit" disabled="disable" value="Upload Image">
</body>
I tried this I think this more helpful for you
$("#element").attr("disabled", false) OR $("#element").removeAttr("disabled"). I hope this first example is better with new jQuery version.
