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

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

第一步、隐藏文件选择框

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

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

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


//multiple属性为多文件上传
//打开文件选择框 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

你可能感兴趣的:(前端)