一个按钮完成前台上传文件操作

我们都知道，前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。

第一步、隐藏文件选择框

第二步、设置按钮事件onclick，触发文件选择框事件

            第三步、选择文件后自动上传，触发文件选择时事件onchange

第四步，使用插件上传，插件有很多，大家可以网上找，我这边用的是jquery.form.js插件（http://plugins.jquery.com/form/）

<form id="signupListImportForm" class="import-file-form" enctype="multipart/form-data">  
    <input type="file" name="excelFile" id="excelFile" style="display:none" multiple="multiple" οnchange="fileUpload()">  //multiple属性为多文件上传
    <input class="btn-dr" type="button" value="导入" οnclick="selectFile()">  
</form>

//打开文件选择框
    function selectFile(){
         $("#excelFile").trigger("click");
    }

//文件上传
function fileUpload(){
    var option = {
        url : "analyzeXml",//这里写你的url
        type : 'POST',
        datatype:'json',//这里是返回类型，一般是json,text
        clearForm: true,//提交后是否清空
        success : function(map) {
         alert("上传"+map.message+"!");
        } ,
        error:function(data){
         alert("页面请求失败！");
        }
    };
    $("#signupListImportForm").ajaxSubmit(option);
    return false;
}

关于后台上传文件部分，可以看看http://blog.csdn.net/wdehxiang/article/details/77619677