I'm using this plugin quite successfully, but have a need to perform some JavaScript validation. I can not figure out how to validate this plugin.
This is how it is added to my page:
The onchange code here only test for the correct file type, yes I know this is redundant, I also check it again server side :)) When it finds a selected file with the correct extension type, it enables the submit button or if the wrong file type, disables the submit button, which starts out disabled when you first arrive at the form. Then on the form I have an onsubmit which calls a function that checks that required fields are completed. All pretty simple right? However, the problem I'm having with the Multifile plugin, is when a file is selected and lets say the file type is correct, then my one function enables the submit button. Now for whatever reason, the visitor clicks on the "remove" link for the file and now there are now files selected, but the submit button is still enabled. I can't figure out how in my onsubmit function for the form, how to detect if any files are selected. At least one file is required to be uploaded and I don't know how to test for it.
Second problem, same plugin. I copy the code from the example page for Example 9 to a straight HTML page and it works fine the way it is written:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml">
< head >
< title > upload </ title >
< script src ="script/jquery-1.11.0.min.js" type ="text/javascript"></ script >
< script src ="script/jquery.MultiFile.js" type ="text/javascript"></ script >
</ head >
< body >
< script type ="text/javascript" language ="javascript">
$( function () { // wait for document to load
$( '#T9' ).MultiFile({
onFileRemove: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>onFileRemove - ' + value + '</li>' )
},
afterFileRemove: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>afterFileRemove - ' + value + '</li>' )
},
onFileAppend: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>onFileAppend - ' + value + '</li>' )
},
afterFileAppend: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>afterFileAppend - ' + value + '</li>' )
},
onFileSelect: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>onFileSelect - ' + value + '</li>' )
},
afterFileSelect: function (element, value, master_element) {
$( '#F9-Log' ).append( '<li>afterFileSelect - ' + value + '</li>' )
}
});
});
</ script >
< form action ="" class ="P10">
< input type ="file" id ="T9"/>
</ form >
< div style =" border :#999 solid 3px; padding :10px;">
This is div#F9-Log - selected files will be populated here...
< br />
< ul id ="F9-Log">
</ ul >
</ div >
</ body >
</ html >
But when I put the same code into the .asp page I'm currently working on, it doesn't work at all. It lets you select a file, but doesn't list it below the textbox and browse button, it just leave the file path in the textbox and none of the events are place in the Div box.
I am no expert with JavaScript and though I am using the multifile, Datepicker and Timepicker plugins, they are pretty much being use at their bare basic formats. Any help here would be great.
Jack