我们都知道,前台选择文件,只能通过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