一、前端代码:
① html 代码:
注意:如需要选择多个文件,进行上传,Ⅰ、multiple=“multiple” 不能省 Ⅱ、选择时是 Ctrl + 你所要选择的文件,不要分多次进行,不然后面选择的文件将会覆盖前面所选的文件
<input type="file" multiple="multiple" id="myFiles" style="width: 100px;height: 25px;">
<input type="button" value="上传" id="upload-test" style="width: 100px;height: 25px;background-color: cornsilk;">
② JavaScript 代码:
注: 传方法的话,直接将方法名作为参数传递,然后在内部进行调用就好
// 点击上传按钮,执行上传操作
// 注: 参数 uploadSuccess uploadFail 是文件上传成功和失败执行方法的方法名
$("#upload-test").on("click",function () {
// 方式一
var url = '${pageContext.request.contextPath}/XXX/uploadFile.koala';
var obj = document.getElementById("myFiles");
var len = obj.files.length;
for (var i = 0; i < len; i++){ // 这个里面可以根据自己的需要对文件进行过滤判断等操作
var fileName = obj.files[i].name;
uploadFile(url,obj.files[i]); // 执行单个文件的上传(每次都创建一个新的 form,并提交)
}
//方式二
var url2 = '${pageContext.request.contextPath}/XXX/uploadFiles.koala';
var files = document.getElementById("myFiles").files;
uploadFiles(url2,files,uploadSuccess,uploadFail); // 执行多个文件的上传(本质上是放到一个 form 对象中,同时提交)
})
// ajax 上传单个文件对象
// url 为访问路径
// files 为上传文件数组
// success 为上传成功后执行方法
// fail 为上传文件失败执行的方法
function uploadFile(url,file,success,fail){
var form = new FormData();
form.append("file",file);
$.ajax({
url:url, //后台url
data: form,
cache: false,
async: true,
type: "POST",
dataType: 'json', //数据返回类型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回调传来的success方法
success(data);
},
error: function (er) { //失败,回调函数
fail(er);
}
});
}
// ajax 上传多个文件对象
// url 为访问路径
// files 为上传文件数组
// success 为上传成功后执行方法
// fail 为上传文件失败执行的方法
function uploadFiles(url,files,success,fail){
var form = new FormData();
for (var i = 0; i < files.length; i++){
form.append("files",files[i]);
}
$.ajax({
url:url, //后台url
data: form,
cache: false,
async: true,
type: "POST",
dataType: 'json', //数据返回类型,可以是xml、json等
processData: false,
contentType: false,
success: function (data) { //成功,回调函数
success(data);
},
error: function (er) { //失败,回调函数
fail(data);
}
});
}
function uploadSuccess() {
alert("上传文件成功")
}
function uploadFail() {
alert("上传文件失败")
}
二、后端 Java 代码
/**
* 上传的是单个文件
*/
@ResponseBody
@RequestMapping("uploadFile")
public void uploadFile(@RequestParam("file") MultipartFile inputFile, HttpServletRequest request){
if(inputFile == null){
System.out.println("没有想要上传的文件");
}else {
try {
String originalFileName = inputFile.getOriginalFilename(); // 获取原始文件名
String savePath = "F:\\temporary";
File savePathDir = new File(savePath);
System.out.println("文件原始名称:"+originalFileName);
System.out.println("原始文件大小: "+inputFile.getSize());
if(!savePathDir.exists()){
savePathDir.mkdirs();
}
inputFile.transferTo(new File(savePath,originalFileName));
}catch (NullPointerException e){
}catch (Exception e){
}
}
}
/**
* 上传的是多个文件
*/
@ResponseBody
@RequestMapping("uploadFiles")
public void uploadFiles(@RequestParam("files") MultipartFile[] inputFiles, HttpServletRequest request){
if(inputFiles.length < 1){
System.out.println("没有想要上传的文件");
}else {
try {
for (int i = 0; i < inputFiles.length;i++){
String originalFileName = inputFiles[i].getOriginalFilename(); // 获取原始文件名
long fileSize = inputFiles[i].getSize(); // 文件大小
String savePath = "F:\\temporary"; // 文件保存地址
File savePathDir = new File(savePath);
if(!savePathDir.exists()){
savePathDir.mkdirs();
}
inputFiles[i].transferTo(new File(savePath,originalFileName));
}
}catch (Exception e){
e.printStackTrace();
}
}
}