关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

ajax文件上传(ajax上传excel文件示例)

JS/CSS admin 浏览 评论

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;
}

参考资料:ssm框架整合文件上传功能详情,请查看:http://www.tpyyes.com/a/javaweb/2017/0216/67.html

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/1222/441.html

    与本文相关的文章