Web Development

• Bootstrap File Input - © Kartik[^]
• Bootstrap Filestyle 1.2.1 - jQuery Customization of input html file for Bootstrap Twitter[^]

Richard Deeming wrote:

Customising the file input is fairly complicated

<div class="form-group">
  <label class="control-label">Enter your avatar's name max(40)</label>
  <div class="input-group">
    <span class="input-group-addon">
      <i class="fa fa-folder-open"></i>                                                                                                
    </span>
    <input id="AvatarName" class="form-control" type="text" maxlength="40">
    <span class="input-group-btn">
      <span class="btn btn-primary btn-file">
        Choose                                                             
        <input id="AvatarBrowse" name="AvatarBrowse" class="btn btn-primary spinner" type="file" />
        <i id="AvatarSpinner" class=""></i>                                                                                                                                                                                                                                                
      </span>                                                        
    </span>
  </div>
</div>

function run_upload_serviceAvatar(e) {

    var _files = e.target.files,
        $spinner = $("#AvatarSpinner");

    if (_files.length > 0) {

        $spinner.toggleClass("fa fa-cog fa-spin");

        if (window.FormData !== undefined) {
            var _data = new FormData();
            for (var x = 0; x < _files.length; x++) {
                _data.append("file" + x, _files[x]);
            }            

            $.ajax({
                type: "POST",
                url: '/Admin/json_upload_avatar?id=-1',
                contentType: false,
                processData: false,
                data: _data,
                error: function (xhr, status, p3, p4) {

                    var err = "run_upload_serviceAvatar Error: " + " " + status + " " + p3 + " " + p4;
                    if (xhr.responseText && xhr.responseText[0] == "{") {
                        err = JSON.parse(xhr.responseText).Message;
                    }
                    console.log(err);
                    $spinner.toggleClass("fa fa-cog fa-spin");

                },
                success: function (data) {
                    console.log(data);
                    $spinner.toggleClass("fa fa-cog fa-spin");

                }
            });
        }
        else {

            alert("This browser doesn't support HTML5 file uploads!");
        }
    }    
}

var table = $("<table/>");
table.append($("<thead/>").append($("<tr/>").append($("<th/>").html("Booth")).append($("<th/>").html("Name"))));
var tbody = table.append("<tbody/>");
$.each(expocadfx.fxData.exhibitors, function(i,v){ tbody.append($("<tr/>").append($("<th/>").text(v.boothNumber)).append($("<td/>").text(v.name))); });
$("body").empty().append(table);

• id
• status
• name
• nameOther
• exhId
• boothNumber
• boothIndex
• address1
• address2
• city
• state
• zip
• country
• contact
• phone
• fax
• email
• website
• profile
• category
• url

• Firefox[^]
• Chrome[^]
• IE[^]