请问如何用fileinput插件调用ajax实现文件上传

Question

现用form表单和ajax做的文件上传，无奈样式是在太难看，看见bootstrap中的fileinput插件做的文件上传控件好看很多，但是又不知道如何用fileinput调用ajax，请大牛解答

$('#import').click(function() {
// $('#file').prop("disabled","true")
console.log("dddd");
var formData = new FormData($("#uploadForm")[0]);
var str = $("#file").val();
if(str.substr(-4,4)!=".zip"){
parent.layer.msg("请导入zip文件", {shade: 0.3});
return ;
}
$('#import').prop("disabled","true")
layer.open({
type : 3,
content : 'xxxxxxxxx',
success : function(layero,index){
$.ajax({
url: "${pageContext.request.contextPath}/uploadXml.action",
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
error: function () {
parent.layer.msg("导入文件出错", {shade: 0.3});
window.parent.layer.closeAll();
},
success: function (data) {
if(data.message=="success"){
layer.close(index);
}else {
parent.layer.msg(data.success, {shade: 0.3});
window.parent.layer.closeAll();
}
// alert("导入成功")
},
end : function(){
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "${pageContext.request.contextPath}/showSignature.action",//请求的action路径
success : function(pageContent) {
$("#right_div",parent.document).html(pageContent);
}
});
}
});
}
})
})

    <form id="uploadForm" class="form-horizontal" style="margin-left:150px;margin-top:80px">
<fieldset>
    <div id="legend" class="">
        <legend class="">请将标准库Zip文件上传用于升级</legend>
    </div>
    <div class="control-group">
        <label class="control-label">文件上传</label>

        <div class="controls">
            <input class="input-file" type="file" id="file" name="file">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">升级</label>

        <div class="controls">
            <button id="import" class="btn btn-info">升级</button>
        </div>
    </div>

</fieldset>

Answer 1

烦请大神来解答一波，界面确实不好看