ajax实现上传excel文件的步骤和方法是什么
这篇文章主要介绍了“ajax实现上传excel文件的步骤和方法是什么”相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ajax实现上传excel文件的步骤和方法是什么文章都会有所收获,下面我们一起来看看吧。
ajax文件上传用jquery ajaxFileUpload插件的话会非常方便,那么在什么情况下回用到ajax文件上传呢?比如我们在submit提交form表单之前可能要先上传图片,或者是没有上传按钮,选中直接上传文件,都要用到ajax文件上传功能,下面来学习一下ajax上传excel文件的示例吧!
感谢各位的阅读,以上就是“ajax实现上传excel文件的步骤和方法是什么”的内容了,经过本文的学习后,相信大家对ajax实现上传excel文件的步骤和方法是什么都有更深刻的体会了吧。这里是博信,小编将为大家推送更多相关知识点的文章,欢迎关注!
ajax文件上传用jquery ajaxFileUpload插件的话会非常方便,那么在什么情况下回用到ajax文件上传呢?比如我们在submit提交form表单之前可能要先上传图片,或者是没有上传按钮,选中直接上传文件,都要用到ajax文件上传功能,下面来学习一下ajax上传excel文件的示例吧!
步骤一:需要在github中下载jqueryajaxFileUpload文件,然后在项目中引入。
下载地址如下:https://github.com/carlcarl/AjaxFileUpload
在头文件中引入方式ajaxFileUpload.js文件,代码如下:
<scripttype="text/javascript"src="${ctx}/asset/lib/ajaxfileupload.js"></script>
步骤二:在页面中使用jqueryajaxFileUpload,先看看我们的html代码,只有一个input,没有提交按钮,选中直接上传文件,需要用到onchange事件,并定义一个id,html代码如下:
<inputtype='file'name='files'id="fileUpload"onchange="uploadExcelFile();"/>
然后我们在<script></script>标签中实现ajax文件上传,“fileElementId”属性表示的是input标签中定义的id,这个很重要,代码如下:
functionuploadExcelFile(){ $.ajaxFileUpload({ url:"./questionType/importExcel", type:"POST", fileElementId:"fileUpload", success:function(data){ }, error:function(erro){ layer.msg('试题导入失败!',{icon:5,time:1000}); } }); }
步骤三:在java后台中实现excel文件上传的方法,用到了springmvc的MultipartFile类,形参files要和input中的name="files" 属性一致,代码如下:
@PostMapping("/questionType/importExcel") @ResponseBody publicStringuploadExportWord(MultipartFilefiles){ System.out.println("============"+file.getOriginalFilename()); //处理部分省略 returnnull; }
感谢各位的阅读,以上就是“ajax实现上传excel文件的步骤和方法是什么”的内容了,经过本文的学习后,相信大家对ajax实现上传excel文件的步骤和方法是什么都有更深刻的体会了吧。这里是博信,小编将为大家推送更多相关知识点的文章,欢迎关注!
版权声明
本文仅代表作者观点,不代表博信信息网立场。