一个按钮完成前台上传文件操作
来源:互联网 发布:六年级上册优化答案 编辑:程序博客网 时间:2024/06/05 13:32
我们都知道,前台选择文件,只能通过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" onchange="fileUpload()"> //multiple属性为多文件上传 <input class="btn-dr" type="button" value="导入" onclick="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
阅读全文
1 0
- 一个按钮完成前台上传文件操作
- 利用bootstrap和js完成一个简易的文件上传按钮
- asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
- 前台上传文件以及页面的文件显示操作
- jquery easy UI + Spring MVC(注解) 完成文件上传操作
- 完成文件上传
- 自定义文件上传按钮
- 按钮上传文件js
- jsp/servlet 完成文件上传
- 录音完成上传文件失败
- java完成文件上传功能
- 文件上传前台控制检测程序
- 文件上传前台控制检测程序
- 前台文件上传失败的原因
- MVC前台上传文件到服务器
- 修改上传文件按钮值
- input上传文件按钮使用
- 点击按钮实现文件上传
- quartz学习2:quartz数据库集群-锁机制
- RILD
- 【PL/SQL】如何导出建表语句(不含数据)
- iOS 曾经上传照片到项目中,但是后面删除了,在真机调试中报错的解决办法
- 又一篇azkaban源码分析
- 一个按钮完成前台上传文件操作
- 关于HTML中input标签的新输入类型
- Postgresql常用命令
- 事务处理性能委员会TPC
- Visual Studio单元测试UnitTest
- 8086CPU寄存器总结
- poj1258 prim算法(模板)
- 201612-2 工资计算
- github之issuse