I have a form an I want to validate input type file with maximum size 9MB. How Can I do this?
<form id="pform" method="post" name="jform">
<input type="file" name="file" id="filed" required="required">
<input type="submit" value="PUBLISH PHOTO" id="hello" name="publishpost" >
</form>
try something like:
$('#filed').change(function(){
var filesize = this.files[0].size/1024/1024; //(IN MB)
});
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
<script type="text/javascript">
function GetFileSize(fileid) {
try {
var fileSize = 0;
//for IE
if ($.browser.msie) {
//before making an object of ActiveXObject,
//please make sure ActiveX is enabled in your IE browser
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var filePath = $("#" + fileid)[0].value;
var objFile = objFSO.getFile(filePath);
var fileSize = objFile.size; //size in kb
fileSize = fileSize / 1048576; //size in mb
}
//for FF, Safari, Opeara and Others
else {
fileSize = $("#" + fileid)[0].files[0].size //size in kb
fileSize = fileSize / 1048576; //size in mb
}
alert("Uploaded File Size is" + fileSize + "MB");
}
catch (e) {
alert("Error is :" + e);
}
}
</script>
<form id="pform" method="post" name="jform">
<input type="file" name="filed" id="filed" required="required">
<input type="button" value="PUBLISH PHOTO" id="hello" name="publishpost" onclick="GetFileSize('filed');" >
</form>
<div class="col-sm-9 col-lg-6 col-xs-12 col-md-9">
<div class="input-group">
<input type="text" class="form-control" name="uploadFile" readonly id="uploadFile">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" name="file" id="filed" required="required">
</span>
</span>
</div>
<div id="spanFileUploadMsg">
</div>
</div>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
<script type="text/javascript">
$(document).on('change', '.btn-file :file', function() {
var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
genrateSizeMsg(this.files[0])
});
function genrateSizeMsg(f)
{
var f = f.size;
f = f / 1048576;
if (f > 9)
{
$("#spanFileUploadMsg").html("The file you are trying to upload is too large (max 9MB)");/* This message will be display in "spanFileUploadMsg" id when size is greater than 9MB */
return false;
}
return true;
}
</script>
