使用Ajaxfileupload插件分别实现单文件和多文件上传

一．Ajaxfileupload上传文件

首先页面jsp代码：需要引入jquery和ajaxfileupload.js

<head>

<title>Insert title here</title>

</head>

<body>

<br />

function upload() {

$.ajaxFileUpload

({

url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用于文件上传的服务器端请求地址

type:'post',

secureuri: false, //是否需要安全协议，一般设置为false

fileElementId: "firstfile", //文件上传域的ID

data:{

"userId": 1

},//一同上传的数据

dataType: 'json', //返回值类型一般设置为json

success: function (data, status) //服务器成功响应处理函数

{

if(data>0){

alert("上传成功");

}else{

alert("上传失败");

}

})

}

</script>

</body>

服务端接收文件（本例使用springmvc接收）：

@Controller

@RequestMapping("/Upload")

publicclass Upload {

@RequestMapping(value = "/ToUploadFile", method = { RequestMethod.POST })

public@ResponseBody Integer ToUploadFile(@RequestParam("firstfile") MultipartFile firstfile,

HttpServletRequest request, HttpServletResponse response) {

try {

request.setCharacterEncoding("utf-8");

} catch (UnsupportedEncodingException e1) {

e1.printStackTrace();

}

response.setContentType("text/html;charset=utf-8");

response.addHeader("Access-Control-Allow-Origin", "*");

response.addHeader("Access-Control-Allow-Methods", "GET,POST");

// ------------------------------------------------------------------------------------------------------------

String originalFilename = null;

try {

if (firstfile.isEmpty()) {

return 0;

} else {

originalFilename = firstfile.getOriginalFilename();

longsize = firstfile.getSize();

String contentType = firstfile.getContentType();

System.out.println("原始文件全路径名: " + originalFilename);

System.out.println("文件大小:" + size + "KB");

System.out.println("文件类型:" + contentType);

System.out.println("========================================");

}

// ------------------------------------------------------------------------------------------------------------

* 1. 获取项目的全路径

String root = request.getServletContext().getRealPath("/WEB-INF/files");

String filename = firstfile.getOriginalFilename();

* 获取文件名，最后一个"\"后面的名字

intindex = filename.lastIndexOf("\\");

if (index != -1) {

filename = filename.substring(index + 1);

}

* 生成唯一的文件名

String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;

* 1. 根据文件名获取hashcode

inthCode = filename.hashCode();

// 将hashcode转化为无符号整数基数为16的整数参数的字符串

String hex = Integer.toHexString(hCode);

* 2. 根据字符串生成文件目录

File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));

dirFile.mkdirs();

* 4. 生成文件

File destFile = new File(dirFile, savename);

String courseFile = destFile.getCanonicalPath();

// 将文件保存到服务器相应的目录位置

firstfile.transferTo(destFile);

///////////////////////////////////////////////////////

} catch (Exception e) {

e.printStackTrace();

return 0;

}

return 1;

}

运行过程如下：

上传文件：

使用Ajaxfileupload插件分别实现单文件和多文件上传

控制台的打印：

使用Ajaxfileupload插件分别实现单文件和多文件上传

服务器路径下存储的文件：

使用Ajaxfileupload插件分别实现单文件和多文件上传

二．上述只能实现单文件的上传，下面顺便实现一下多文件同时上传：

Ajaxfileupload.js插件默认的都是单文件上传，所有要实现多文件上传需要改变源代码：（需要注意的是修改js等静态代码，再次运行的时候要清除服务器的缓存，不然还是用的之前的js导致无法多文件上传）

原来的代码：

createUploadForm: function(id, fileElementId)

{

//create form

var formId = 'jUploadForm' + id;

var fileId = 'jUploadFile' + id;

var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

var oldElement = $('#' + fileElementId);

var newElement = $(oldElement).clone();

$(oldElement).attr('id', fileId);

$(oldElement).before(newElement);

$(oldElement).appendTo(form);

//set attributes

$(form).css('position', 'absolute');

$(form).css('top', '-1200px');

$(form).css('left', '-1200px');

$(form).appendTo('body');

return form;

}

修改后：

createUploadForm: function(id, fileElementId)

{

var formId = 'jUploadForm' + id;

var fileId = 'jUploadFile' + id;

var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

if(typeof(fileElementId) == 'string'){

fileElementId = [fileElementId];

}

for (var i in fileElementId)

{

var oldElement = $('#' + fileElementId[i]);

var newElement = $(oldElement).clone();

$(oldElement).attr('id', fileId);

$(oldElement).before(newElement);

$(oldElement).appendTo(form);

}

//set attributes

$(form).css('position', 'absolute');

$(form).css('top', '-1200px');

$(form).css('left', '-1200px');

$(form).appendTo('body');

return form;

下面是前端代码：

<head>

<title>Insert title here</title>

</head>

<body>

<br />

function upload() {

$.ajaxFileUpload

({

url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFile', //用于文件上传的服务器端请求地址

type:'post',

secureuri: false, //是否需要安全协议，一般设置为false

fileElementId: "firstfile", //文件上传域的ID

data:{

"userId": 1

},//一同上传的数据

dataType: 'json', //返回值类型一般设置为json

success: function (data, status) //服务器成功响应处理函数

{

if(data>0){

alert("上传成功");

}else{

alert("上传失败");

}

})

}

function uploads() {

$.ajaxFileUpload

({

url: 'http://localhost:8080/AjaxUpload/Upload/ToUploadFiles', //用于文件上传的服务器端请求地址

type:'post',

secureuri: false, //是否需要安全协议，一般设置为false

fileElementId: ['file1','file2','file3'], //文件上传域的ID

data:{

"userId": 1

},//一同上传的数据

dataType: 'json', //返回值类型一般设置为json

success: function (data, status) //服务器成功响应处理函数

{

if(data>0){

alert("上传成功");

}else{

alert("上传失败");

}

})

}

</script>

</body>

服务器端代码如下：

@RequestMapping(value = "/ToUploadFiles", method = { RequestMethod.POST })

public@ResponseBody Integer ToUploadFile2(@RequestParam("files") MultipartFile[] files,

HttpServletRequest request, HttpServletResponse response) {

if(files!=null&&files.length>0)

{

for(inti=0;i<files.length;i++)

{

MultipartFile file=files[i];

try {

request.setCharacterEncoding("utf-8");

} catch (UnsupportedEncodingException e1) {

e1.printStackTrace();

}

response.setContentType("text/html;charset=utf-8");

response.addHeader("Access-Control-Allow-Origin", "*");

response.addHeader("Access-Control-Allow-Methods", "GET,POST");

// ------------------------------------------------------------------------------------------------------------

String originalFilename = null;

try {

if (file.isEmpty()) {

return 0;

} else {

originalFilename = file.getOriginalFilename();

longsize = file.getSize();

String contentType = file.getContentType();

System.out.println("原始文件全路径名: " + originalFilename);

System.out.println("文件大小:" + size + "KB");

System.out.println("文件类型:" + contentType);

System.out.println("========================================");

}

// ------------------------------------------------------------------------------------------------------------

* 1. 获取项目的全路径

String root = request.getServletContext().getRealPath("/WEB-INF/files");

String filename = file.getOriginalFilename();

* 获取文件名，最后一个"\"后面的名字

intindex = filename.lastIndexOf("\\");

if (index != -1) {

filename = filename.substring(index + 1);

}

* 生成唯一的文件名

String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;

* 1. 根据文件名获取hashcode

inthCode = filename.hashCode();

// 将hashcode转化为无符号整数基数为16的整数参数的字符串

String hex = Integer.toHexString(hCode);

* 2. 根据字符串生成文件目录

File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));

dirFile.mkdirs();

* 4. 生成文件

File destFile = new File(dirFile, savename);

String courseFile = destFile.getCanonicalPath();

// 将文件保存到服务器相应的目录位置

file.transferTo(destFile);

///////////////////////////////////////////////////////

} catch (Exception e) {

e.printStackTrace();

return 0;

}

return 1;

}

运行过程如下：

上传三个文件：

使用Ajaxfileupload插件分别实现单文件和多文件上传

控制台的打印：

使用Ajaxfileupload插件分别实现单文件和多文件上传

服务器路径下的文件：

使用Ajaxfileupload插件分别实现单文件和多文件上传

使用Ajaxfileupload插件分别实现单文件和多文件上传

相关推荐