解析ajaxFileUpload 异步上传文件简单使用
发布时间 - 2026-01-10 22:12:51 点击率:次这里就简单介绍下ajaxFileUpload,jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构,所以代码如下。

首先是jsp部分:
<!-- <form method="post"> -->
<input type="file" name="n_file" id="fileToUpload" value="上传表格" />
<button id="upload1" class="btn btn-default">上传</button>
<!-- </form> -->
这里说下 为什么把form注释了,因为我的jsp中已经有了另外一个form 在调试过程中发现可能有冲突就把form注释了,事实证明ajaxFileUpload 不用form表单一样可以提交,下面就是js代码部分:
$(function(){
//点击打开文件选择器
$("#upload1").on('click', function() {
//选择文件之后执行上传
$.ajaxFileUpload({
url:'supplyDataReportUploadExcel', //url自己写
secureuri:false, //这个是啥没啥用
type:'post',
fileElementId:'fileToUpload',//file标签的id
dataType: 'json',//返回数据的类型
//data:{name:'logan'},//一同上传的数据
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如下:
<script type="text/javascript">Core.js('./js/iface/upload');</script>
<script type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>
第一段引入的upload 就是上面js的内容,我们的引入js已经被封装好了,所以直接写那就行,具体结合实际情况 ,下面的要用到的jQuery插件AjaxFileUpload的js文件。
接下来是Controller方法如何相应:
@SuppressWarnings("resource")
@RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST)
public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception {
AjaxJson json = new AjaxJson();
ObjectMapper mapper = new ObjectMapper();
UploadFormBackVo uploadFormBackVo = new UploadFormBackVo();
//判断是否是空的Excel 包括没有标题
if(n_file.getSize()>0){
try{
//先判断 文件名 是否符合规格 因为不知道怎么获取上传文件的路径 后期修改
//获取文件
//验证文件名
String fileName = n_file.getOriginalFilename();
String fileNewName = fileName.replaceAll(".xls", "");
String eL = "[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}";
Pattern p = Pattern.compile(eL);
Matcher m = p.matcher(fileNewName);
boolean dateFlag = m.matches();
if (!dateFlag) {
System.out.println("格式错误");
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传失败,Excel文件名不符合规格!!!");
supplyDataReportService.insert(uploadFormBackVo);
json.setSuccess(false);
json.setMsg("Excel,NameError!!!");
String jsonStr = mapper.writeValueAsString(json);
return jsonStr;
}
//上传文件
UploadUtil.SaveFileFromInputStream(n_file.getInputStream(), "D:/补数据报表文件", n_file.getOriginalFilename());
InputStream is2 = new FileInputStream("D:/补数据报表文件/"+n_file.getOriginalFilename());
//读取文件进行内容验证
ExcelReader excelReader = new ExcelReader();
Map<Integer, SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer, SupplyDataReportBackVo>();
String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file);
//判断 readExcelContent()解析Excel文件 是否符合规范 如果符合 修改相应数据
if(json.isSuccess()==true){
//遍历map 用value --》SupplyDataReportBackVo 调用 updateById方法
for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){
supplyDataReportService.updateById(supplyDataReportBackVo);
}
System.out.println("获得Excel表格的内容:");
for (int i = 1; i <= supplyDataReportBackVos.size(); i++) {
System.out.println(supplyDataReportBackVos.get(i));
}
//保存上传记录
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传成功");
supplyDataReportService.insert(uploadFormBackVo);
return jsonStr;
}
// 解析Excel 文件 中 有空值 保存这次上传的记录且删除已上传的Excel文件, 删除已上传的Excel文件已在 readExcelContent()中处理
uploadFormBackVo.setFormName(n_file.getOriginalFilename());
uploadFormBackVo.setUploadTime(new Date());
uploadFormBackVo.setIfsuccess("上传失败,Excel中有空值!!!");
supplyDataReportService.insert(uploadFormBackVo);
return jsonStr;
} catch (IOException e){
System.out.println(e.getMessage());
}
}else{
//ajax返回的数据
json.setSuccess(false);
json.setMsg("Upload File Null!!!!!");
String jsonStr = mapper.writeValueAsString(json);
return jsonStr;
}
System.out.println("ajax请求成功");
return "";
/ json.setMsg("upload,success!!!");
}
这个方法注意几个地方就行,其他的都是楼主本人自身的业务逻辑,第一@RequestMapping中请求的方式为POST,第二传入的参数有个MultipartFile n_file,这个n_file要跟jsp中的<input>标签中name属性对应。第三要注意返回值Sting上的一个注解@ResponseBody,剩下两个需要注意的地方就是AjaxJson,ObjectMapper。
AjaxJson是自己封装的一个model类,用来处理ajax的,至于ObjectMapper是用来转换类型的具体的自己百度或者脑补吧,楼主也紧紧限于会用。下面贴上AjaxJson:
package com.zhongxin.web.ops.adrule.model;
import java.util.Map;
public class AjaxJson {
private boolean success = true;
private String msg = "ok";
private Object obj = null;
private Map<String, Object> attributes;
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getObj() {
return obj;
}
public void setObj(Object obj) {
this.obj = obj;
}
public Map<String, Object> getAttributes() {
return attributes;
}
public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}
}
这就是一个简单的ajaxFileUpload 使用流程,欢迎探讨!也希望大家多多支持。
# ajaxfileupload
# 异步
# ajax
# 异步上传文件
# fileupload
# 异步上传
# jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
# jQuery插件ajaxFileUpload异步上传文件
# jquery之ajaxfileupload异步上传插件(附工程代码)
# ajax图片上传
# 图片异步上传
# 更新实例
# php+ajax实现异步上传文件或图片功能
# jQuery插件ajaxFileUpload实现异步上传文件效果
# asp.net+ajaxfileupload.js 实现文件异步上传代码分享
# JQuery插件ajaxfileupload.js异步上传文件实例
# Ajax异步上传文件实例代码分享
# ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
# ajax实现文件异步上传并回显文件相关信息功能示例
# 上传
# 就行
# 实际情况
# 会用
# 是否符合
# 上传文件
# 的是
# 都是
# 是一个
# 几个
# 好了
# 有个
# 遍历
# 其他的
# 这就
# 我用
# 要注意
# 就把
# 要用
# 能有
相关栏目:
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐:
南京网站制作费用,南京远驱官方网站?
Swift中循环语句中的转移语句 break 和 continue
电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目?
Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件
香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南
专业型网站制作公司有哪些,我设计专业的,谁给推荐几个设计师兼职类的网站?
魔毅自助建站系统:模板定制与SEO优化一键生成指南
微信小程序 require机制详解及实例代码
Laravel如何操作JSON类型的数据库字段?(Eloquent示例)
动图在线制作网站有哪些,滑动动图图集怎么做?
详解jQuery中基本的动画方法
网站制作软件免费下载安装,有哪些免费下载的软件网站?
如何用已有域名快速搭建网站?
Bootstrap CSS布局之列表
猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】
Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】
Android滚轮选择时间控件使用详解
java获取注册ip实例
Linux系统命令中tree命令详解
微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】
网易LOFTER官网链接 老福特网页版登录地址
laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程
Laravel怎么实现API接口鉴权_Laravel Sanctum令牌生成与请求验证【教程】
Java解压缩zip - 解压缩多个文件或文件夹实例
Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践
JavaScript Ajax实现异步通信
Laravel如何实现多语言支持_Laravel本地化与国际化(i18n)配置教程
Linux系统命令中screen命令详解
Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码?
如何在景安云服务器上绑定域名并配置虚拟主机?
php静态变量怎么调试_php静态变量作用域调试技巧【解答】
如何快速搭建高效服务器建站系统?
Bootstrap整体框架之CSS12栅格系统
如何在不使用负向后查找的情况下匹配特定条件前的换行符
INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】
Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】
1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤
简单实现jsp分页
WordPress 子目录安装中正确处理脚本路径的完整指南
Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】
Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道
成都品牌网站制作公司,成都营业执照年报网上怎么办理?
如何用美橙互联一键搭建多站合一网站?
HTML透明颜色代码怎么让下拉菜单透明_下拉菜单透明背景指南【技巧】
手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办?
手机软键盘弹出时影响布局的解决方法
如何续费美橙建站之星域名及服务?
Laravel如何实现API速率限制?(Rate Limiting教程)
PythonWeb开发入门教程_Flask快速构建Web应用
Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践

