解析ajaxFileUpload 异步上传文件简单使用

前端之家收集整理的这篇文章主要介绍了解析ajaxFileUpload 异步上传文件简单使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这里就简单介绍下ajaxFileUpload,jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构,所以代码如下。

首先是jsp部分:

这里说下 为什么把form注释了,因为我的jsp中已经有了另外一个form 在调试过程中发现可能有冲突就把form注释了,事实证明ajaxFileUpload 不用form表单一样可以提交,下面就是js代码部分:

文件选择器 $("#upload1").on('click',function() { //选择文件后执行上传
$.ajaxFileUpload({  
  url:'supplyDataReportUploadExcel',//url自己写  
  secureuri:false,//这个是啥没啥用 
  type:'post',fileElementId:'fileToUpload',//file<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>的id  
  dataType: 'json',//返回数据的类型  
  //data:{name:'logan'},//一同<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>的数据  
  success: function (data,status) {  

// alert(data);
// alert(data.msg);
// alert(data.success);
if(data.success){
alert("upload,success!!!");
window.location.href='supplyDataReport';
}else{
alert(data.msg);
window.location.href='supplyDataReport';
}

  }/*,error: function (data,status,e) {  
    alert(e);  
  }*/  
});  

});

});

本人js不好,只是会用这个js不能完全copy走,要结合项目结构的实际情况,不过大体参数干什么的注释都写了。一定注意type是post跟请求对应的Controller的方法的method=RequestMethod.POST 一致。注意dataType:'json',一定注意json的大小写。

ps:这里要说一下我用的data.success做的判断跟后面的一个实体类AjaxJson有关系,注意!!!!!

对了 jsp中还需要引入 对应的js如下:

猜你在找的Ajax相关文章