jQuery实现异步上传一个或多个文件

2023-07-18 16:35:03 186

本文实例为大家分享了jQuery实现异步上传一个或多个文件的具体代码，供大家参考，具体内容如下

首先使用SpringMvc文件上传，需要引入第三方上传文件的jar：


commons-fileupload
commons-fileupload
1.3.1


commons-io
commons-io
2.4

响应json需要导入的包：


com.fasterxml.jackson.core
jackson-databind
2.9.0


com.fasterxml.jackson.core
jackson-core
2.9.0


com.fasterxml.jackson.core
jackson-annotations
2.9.0

接下来看jsp文件：

<%@pagecontentType="text/html;charset=UTF-8"language="java"%> 首页

同步上传一个文件

异步上传一个文件

异步上传一个文件,且表单有其他数据

编号:
账户名:
金额:

异步上传多个文件,且表单有其他数据

编号:
账户名:
金额:

下面是controller：

@Controller
@RequestMapping("/upload")
publicclassFileController{

/**
*同步文件一个上传和异步上传一个文件，共同使用这一个控制器方法
*@paramrequest
*@paramupload
*@return
*@throwsIOException
*/
@RequestMapping(value="/testUpload",method=RequestMethod.POST)
publicStringupload(HttpServletRequestrequest,MultipartFileupload)throwsIOException{
//获取文件的保存路径
Stringpath=request.getServletContext().getRealPath("/uploads");
//获取上传文件的名称
Stringfilename=upload.getOriginalFilename();
//获取随机字符串
Stringprefix=UUID.randomUUID().toString().replaceAll("-","");
filename=prefix+"_"+filename;
//创建文件对象
Filefile=newFile(path);
//判断路径是否存在，不存在则创建
if(!file.exists()){
file.mkdir();
}
//上传文件
upload.transferTo(newFile(file,filename));
return"success";
}


/**
*异步文件上传和表单数据
*@paramrequest
*@paramupload
*@return
*@throwsIOException
*/
@RequestMapping(value="/testUpload2",method=RequestMethod.POST)
public@ResponseBodyAccountupload2(HttpServletRequestrequest,MultipartFileupload,Accountaccount)throwsIOException{
//获取文件的保存路径
Stringpath=request.getServletContext().getRealPath("/uploads");
//获取上传文件的名称
Stringfilename=upload.getOriginalFilename();
//获取随机字符串
Stringprefix=UUID.randomUUID().toString().replaceAll("-","");
filename=prefix+"_"+filename;
//创建文件对象
Filefile=newFile(path);
//判断路径是否存在，不存在则创建
if(!file.exists()){
file.mkdir();
}
//上传文件
upload.transferTo(newFile(file,filename));
returnaccount;
}


/**
*异步多个文件上传和表单数据
*@paramrequest
*@paramupload采用数组接收
*@return
*@throwsIOException
*/
@RequestMapping(value="/testUpload3",method=RequestMethod.POST)
public@ResponseBodyAccountupload3(HttpServletRequestrequest,MultipartFile[]upload,Accountaccount)throwsIOException{
//获取文件的保存路径
Stringpath=request.getServletContext().getRealPath("/uploads");
//创建文件对象
Filefile=newFile(path);
//判断路径是否存在，不存在则创建
if(!file.exists()){
file.mkdir();
}

for(MultipartFilemultipartFile:upload){
//获取上传文件的名称
Stringfilename=multipartFile.getOriginalFilename();
//获取随机字符串
Stringprefix=UUID.randomUUID().toString().replaceAll("-","");
filename=prefix+"_"+filename;
//上传文件
multipartFile.transferTo(newFile(file,filename));
}
returnaccount;
}
}

publicclassAccountimplementsSerializable{
privateintid;
privateStringname;
privatefloatmoney;
//getterorsetter....
}

注意事项：

上传文件时，表单的enctype修改为：multipart/form-data；
后端使用MultipartFileupload对象接收，upload必须和的name属性一致；
上传多个文件，给添加：multiple=“multiple”

效果：

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

jQuery实现异步上传一个或多个文件

热门推荐

随机推荐