上一篇：jQuery命名冲突问题的处理方案有哪些下一篇：如何用js正则表达式的方法实现禁止input输入空格

这篇文章主要介绍了“ajax实现上传excel文件的步骤和方法是什么”相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ajax实现上传excel文件的步骤和方法是什么文章都会有所收获，下面我们一起来看看吧。

ajax文件上传用jquery ajaxFileUpload插件的话会非常方便，那么在什么情况下回用到ajax文件上传呢？比如我们在submit提交form表单之前可能要先上传图片，或者是没有上传按钮，选中直接上传文件，都要用到ajax文件上传功能，下面来学习一下ajax上传excel文件的示例吧！

步骤一：需要在github中下载jquery ajaxFileUpload文件，然后在项目中引入。

下载地址如下：https://github.com/carlcarl/AjaxFileUpload

在头文件中引入方式ajaxFileUpload.js文件，代码如下：

<script type="text/javascript" src="${ctx}/asset/lib/ajaxfileupload.js"></script>

步骤二：在页面中使用jquery ajaxFileUpload，先看看我们的html代码，只有一个input，没有提交按钮，选中直接上传文件，需要用到onchange事件，并定义一个id，html代码如下：

<input type='file' name='files' id="fileUpload" onchange="uploadExcelFile();"/>

然后我们在<script></script>标签中实现ajax文件上传，“fileElementId”属性表示的是input标签中定义的id，这个很重要，代码如下：

function uploadExcelFile() {
       $.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
public String uploadExportWord(MultipartFile files) {
   System.out.println("============"+file.getOriginalFilename());
   //处理部分省略
   return null;
}

感谢各位的阅读，以上就是“ajax实现上传excel文件的步骤和方法是什么”的内容了，经过本文的学习后，相信大家对ajax实现上传excel文件的步骤和方法是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！