jQuery File Upload - validate filesize and extension

I'm using jQuery File Upload, my code is:


        var ul = $('#upload ul');
     // Initialize the jQuery File Upload plugin
            maxFileSize: 500,
            acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,
            formData: {
                action: 'ja_upload_doc',
                cv_id: $('#cv_id').val(),
                first_name: $('#first_name').val(),
                last_name: $('#last_name').val(),
            // This element will accept file drag/drop uploading
            dropZone: $('#drop'),

            // This function is called when a file is added to the queue;
            // either via the browse button, or via drag/drop:
            add: function (e, data) {

                // Automatically upload the file once it is added to the queue
                var jqXHR = data.submit().success(function (result, textStatus, jqXHR) {

            progress: function(e, data){
            done:function(e, data){

            fail:function(e, data){
                // Something has gone wrong!



I'm including

  • jquery.ui.widget.js
  • jquery.iframe-transport.js
  • jquery.fileupload.js
  • jquery.fileupload-ui.js
  • jquery.fileupload.css

Is there anything else I need to include to make the Validation work? Or is there something wrong with my code?


You need to include jquery.fileupload-process.js and jquery.fileupload-validate.js files in this order to be able to validate.

To validate filesize just use: maxFileSize

maxFileSize: 500 // in byte 1024 * 1024 = 1Mb // for maximum size
minFileSize: 1   // in byte also

and to validate extension use : acceptFileTypes

acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

for more information read about this option

      <script type = "text/javascript">
        var counter = 0;
        function AddFileUpload() {
        var div = document.createElement('DIV');
        div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
         '" type="file" />' +'<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value=""  />' +
          '<input id="Button' + counter + '" type="button" ' +
          'value="Remove" onclick = "RemoveFileUpload(this)" />';
    function RemoveFileUpload(div) {

 html codes ////////////
    <asp:Label ID="lblError" runat="server" Font-Bold="true" ForeColor="Red"> </asp:Label><br />
  <span style="font-family:Arial"><span style="color: #003366">&nbsp;Click to add files</span></span>
 <input id="Button1" onclick="AddFileUpload()" 
 style="height: 27px; width: 74px;" tabindex="25" type="button" value="add" /><br /> <br /><br />
  <div id="FileUploadContainer">
  <asp:FileUpload ID="FileUpload1" runat="server" />
  <input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value=""  />
  <!--FileUpload Controls will be added here -->
                                                                                          </div>                                                                                         <br />                                                                                         <br />                                                                                          <br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
<br /><br />

Need Your Help

access EF classes from a Class Library - exactly how do configure/test the connection string in the client? (getting errors)

.net entity-framework connection-string

I'm getting very confused about how to call my EF classes in a Class Library from the Client Project I have? Things worked fine when they were in the same project. Now I'm getting errors such as "

On img click display a div

javascript image html

I'm trying to make a Javascript code that if you click on of the "cards" then a div will display above it.