AjaxFileUpload实现文件上传
2018-03-16 本文已影响0人
滴雨幻想
此例为maven项目，实现学生模块中简历的上传操作。所用框架为SSM框架。
此处将下载文件、删除文件的方法统一展示，因为这是上传配套的功能，不作另外阐述。
AjaxFileUpload.js文件可在百度自行下载，下载后放入项目中，并在页面中引用即可。
1.JSP 构建一个隐藏的文件域，当点击上传简历时，模拟点击文件域，弹窗文件选择框；下载文件仅是做了一个超链接，指向后台下载请求地址，同时将fileId作为参数传向后台即可。
<a href="javascript:void(0)" class="easyui-linkbutton" id="uploadFile" iconCls="icon-import" plain="true">上传简历</a>
<input type="file" id="fileElement" name="fileElement" style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
<a href='../file/demoStudentFile/downloadFile?fileId=文件ID"++"' style='color:blue' >"+下载“文件名”+"</a>
2.JS
/**
* 页面初始化
*/
$(document).ready(function () {
$("#uploadFile").on("click",uploadFile); //上传文件绑定事件
}
/**
* 上传附件
* @returns
*/
function uploadFile(){
var rows = $('#studentGrid').datagrid('getChecked');
if (rows==null||rows.length==0) {
ts("未选中数据"); //ts 显示信息
return;
}else if (rows.length>1){
ts("请选择一条数据");
return;
}else{
//获取当前数据对应的附件ID
var fkFileId = rows[0].fkFileId;
//导入表格url
var url = "../file/demoStudentFile/uploadFile";
//文件域ID
var fileId = "fileElement";
//文件类型名称，用于提示信息
var fileTypeName = " doc,docx,xls,xlsx,ppt,pptx ";
//文件类型，用于判断文件后缀是否有效
var fileType = "doc;docx;xls;xlsx;ppt;pptx";
//组装向后台传输的数据格式
var d = {
stuId : rows[0].stuId,
fileId : fkFileId
};
if(fkFileId!=null&&fkFileId.trim().length!=0){
//已经上传过附件
$.messager.confirm('提示', '确定要覆盖之前上传的文件？', function (r) {
if (!r) {return;}
importUtil(url,d,fileId,fileTypeName,fileType);
});
}else{
importUtil(url,d,fileId,fileTypeName,fileType);
}
}
}
/** 以下为公用JS中的公用方法，所有导入或上传文件均可直接调用，将文件域ID，文件类型等传递到方法中即可 **/
/**
* 点击导入或上传按钮，绑定文件域事件，模拟点击，打开文件选择框
* @param url
* @param fileId 文件域ID
* @param fileTypeName 上传的文件类型名称(Word、Excel、PPT...),用于提示信息
* @param fileType 要求上传的文件类型，各个类型间用英文;隔开 (xls;xlsx),用于判断文件后缀是否有效
* @returns
*/
function importUtil(url,d,fileId,fileTypeName,fileType){
//Excel文件域绑定改变事件
$("#"+fileId).change( function() {
importFileUtil(url,d,fileId,fileTypeName,fileType);
});
$("#"+fileId).trigger("click");
}
/**
* 传输文件
* @param url
* @param fileId 文件域ID
* @param fileTypeName 上传的文件类型名称(Word、Excel、PPT...),用于提示信息
* @param fileType 要求上传的文件类型，各个类型间用英文;隔开 (xls;xlsx),用于判断文件后缀是否有效
* @returns
*/
function importFileUtil(url,d,fileId,fileTypeName,fileType){
if(checkFileType(fileId,fileTypeName,fileType)){
$.ajaxFileUpload({
url: url,
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: fileId, //文件上传域的ID
dataType:"JSON",
data : d,
success: function (data, status){ //服务器成功响应处理函数
var result = $.parseJSON(data);
$("#"+fileId).val("");
$.messager.show({ title: '提示', msg: result.msg, timeout: 1000, style: {} });
},
error: function (data, status, e){ //服务器响应失败处理函数
alert("导入失败");
}
});
return false;
}
}
/**
* 校验文件类型
* @param fileId 文件域ID
* @param fileTypeName 上传的文件类型名称(Word、Excel、PPT...),用于提示信息
* @param fileType 要求上传的文件类型，各个类型间用英文;隔开 (xls;xlsx),用于判断文件后缀是否有效
* @returns
*/
function checkFileType(fileId,fileTypeName,fileType){
var fileDir = $("#"+fileId).val();
if("" == fileDir){
ts("请选择有效的"+fileTypeName+"文件！");
return false;
}
var suffix = fileDir.substr(fileDir.lastIndexOf(".")+1);
var fileTypes = fileType.split(";");
if(fileTypes.indexOf(suffix)==-1){
ts("请选择有效的"+fileTypeName+"文件！");
return false;
}
return true;
}
3.实体类 DemoStudent.java
package com.project.entity.demo;
import com.project.entity.BaseEntity;
/**
* @author hmz 2017年12月25日 下午5:05:03 学生实体类
*/
@SuppressWarnings("serial")
public class DemoStudent extends BaseEntity {
private String stuId;// 学生id
private String name;// 学生姓名
private String sex;// 学生性别
private String phone;// 学生电话
private String address;// 学生地址
private String message;// 学生自我评价
private String fkFileId;// 附件ID
private String fkFileName;// 附件名称
public String getStuId() {
return stuId;
}
public void setStuId(String stuId) {
this.stuId = stuId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public String getFkFileId() {
return fkFileId;
}
public void setFkFileId(String fkFileId) {
this.fkFileId = fkFileId;
}
public String getFkFileName() {
return fkFileName;
}
public void setFkFileName(String fkFileName) {
this.fkFileName = fkFileName;
}
}
4.实体类 DemoFile.java
package com.project.entity.demo;
import javax.validation.constraints.Size;
import com.project.entity.BaseEntity;
/**
* 上传文件Entity
* @author HMZ
* @version 2017年10月6日上午11:36:15
*/
@SuppressWarnings("serial")
public class DemoFile extends BaseEntity {
/**
* 附件ID.
*/
@Size(max = 36, min = 0, message = "附件ID长度为36位")
private String fileId;
/**
* 附件名称.
*/
@Size(max = 50, min = 0, message = "附件名称长度为50位")
private String fileName;
/**
* 附件后缀.
*/
@Size(max = 50, min = 0, message = "附件名称长度为50位")
private String fileExt;
/**
* 附件地址.
*/
@Size(max = 100, min = 0, message = "附件地址长度为100位")
private String fileUrl;
public String getFileExt() {
return fileExt;
}
public void setFileExt(String fileExt) {
this.fileExt = fileExt;
}
public String getFileId() {
return fileId;
}
public void setFileId(String fileId) {
this.fileId = fileId;
}
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getFileUrl() {
return fileUrl;
}
public void setFileUrl(String fileUrl) {
this.fileUrl = fileUrl;
}
}
5.Controller层 DemoStudentFileController.java 主要用于获取文件并调用Service中方法
package com.project.controller.demo;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.activiti.engine.impl.util.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.project.entity.demo.DemoStudent;
import com.project.service.demo.DemoStudentService;
import com.project.util.cipher.CipherTransport;
/**
* @ClassName: DemoStudentFileController
* @Description: TODO
* @author: HeMengZhu
* @date: 2018年2月28日 下午3:49:22
*/
@Controller
@CipherTransport
@RequestMapping("/file/demoStudentFile")
public class DemoStudentFileController {
@Autowired
private DemoStudentService demoStudentService;
/**
* 上传附件
* @Title: uploadFile
* @Description: TODO
* @param file
* @param stuId 学生id
* @param request
* @param response
* @throws IOException
* @return: void
*/
@ResponseBody
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public void uploadFile(@RequestParam("fileElement") MultipartFile file, String stuId, String fileId, HttpServletRequest request, HttpServletResponse response) throws IOException {
JSONObject obj = demoStudentService.uploadFile(file, stuId, fileId, request);
response.getWriter().print(obj.toString());
}
/**
* 下载附件
* @Title: downloadFile
* @Description: TODO
* @param fileId
* @param response
* @throws UnsupportedEncodingException
* @return: void
*/
@ResponseBody
@RequestMapping(value = "/downloadFile", method = RequestMethod.GET)
public void downloadFile(@RequestParam("fileId") String fileId, HttpServletResponse response) throws UnsupportedEncodingException {
demoStudentService.downloadFile(fileId, response);
}
}
6.Service层 DemoStudentService.java 主要处理业务逻辑
package com.project.service.demo;
import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.activiti.engine.impl.util.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.project.entity.demo.DemoStudent;
import com.project.mapper.demo.DemoStudentMapper;
import com.project.util.ConstUtil;
import com.project.util.file.ExportExcelUtil;
import com.project.util.file.FileConstUtil;
import com.project.util.file.FileValidateUtil;
import com.project.util.file.ImportExcelUtil;
/**
* @ClassName: DemoStudentService
* @Description: TODO
* @author: HeMengZhu
* @date: 2018年2月28日 下午3:52:03
*/
@Service
public class DemoStudentService {
@Autowired
private DemoStudentMapper demoStudentMapper;
@Autowired
private DemoFileService demoFileService;
/**
* 上传附件
* @Title: uploadFile
* @Description: TODO
* @param file
* @param stuId
* @param request
* @return
* @return: JSONObject
*/
@Transactional
public JSONObject uploadFile(MultipartFile file, String stuId, String fileId, HttpServletRequest request) {
JSONObject obj = new JSONObject();
// 验证附件的有效性，其中大小是固定的，第二个参数为可上传的文件类型集合
obj = FileValidateUtil.validateFile(file, FileConstUtil.FileMessage.EXTS);
// 文件验证不通过，直接返回错误信息
if (obj.has("state")) {
return obj;
}
// 生成随机数作为附件ID
String fkFileId = UUID.randomUUID().toString();
// 上传附件
boolean flag = demoFileService.uploadFile(file, fkFileId, request);
// 说明上传成功
Map<String, String> params = new HashMap<String, String>();
params.put("stuId", stuId);
params.put("fkFileId", fkFileId);
// 文件上传成功
if (flag) {
flag = demoStudentMapper.updateFkFileId(params);
if (flag) {
// 数据更新成功
if (fileId != null && fileId.trim().length() != 0) {
// 删除上一次上传的文件
demoFileService.delete(fileId);
}
obj.put("msg", FileConstUtil.FileMessage.SUCCESS_MESSAGE);
} else {
// 数据更新失败，删除文件
demoFileService.delete(fkFileId);
obj.put("msg", FileConstUtil.FileMessage.ERROR_MESSAGE);
}
}
return obj;
}
}
/**
* 下载附件
* @Title: downloadFile
* @Description: TODO
* @param fileId
* @param response
* @throws UnsupportedEncodingException
* @return: void
*/
@Transactional
public void downloadFile(String fileId, HttpServletResponse response) throws UnsupportedEncodingException {
if (fileId == null || fileId.trim().length() == 0) {
throw new UnsupportedEncodingException();
} else {
demoFileService.downloadFile(fileId, response);
}
}
7.Service层 DemoFileService.java 主要将文件上传至服务器中，并插入文件表中记录，该Service中为上传文件的公用代码，所有上传均调用该方法即可实现文件的上传和文件表信息的插入，至于上传文件模块的其他逻辑，理应写在自己的Service层中，比如第6条DemoStudentService中。
package com.project.service.demo;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import com.project.entity.demo.DemoFile;
import com.project.mapper.demo.DemoFileMapper;
/**
* 上传文件Service
* @ClassName: DemoFileService
* @Description: TODO
* @author: HeMengZhu
* @date: 2018年3月2日 上午9:15:43
*/
@Service
public class DemoFileService {
@Autowired
private DemoFileMapper demoFileMapper;
/**
* 上传附件信息
* @Title: uploadFile
* @Description: TODO
* @param file
* @param fileId
* @param request
* @return
* @return: boolean
*/
@Transactional
public boolean uploadFile(MultipartFile file, String fileId, HttpServletRequest request) {
try {
// 得到项目的WEB-INF目录
String base = request.getServletContext().getRealPath("WEB-INF");
// 将上传文件名更新为当前时间+文件名，以保证文件名的唯一性
String name = System.currentTimeMillis() + file.getOriginalFilename();
// 这里将上传得到的文件保存至file目录
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(base + "/file/", name));
DemoFile item = new DemoFile();
item.setFileId(fileId);
item.setFileName(file.getOriginalFilename().substring(0, file.getOriginalFilename().lastIndexOf(".")));
item.setFileExt(file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1));
item.setFileUrl(base + "/file/" + name);
boolean flag = demoFileMapper.insert(item);
return flag;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
/**
* 下载附件
* @Title: downloadFile
* @Description: TODO
* @param fileId
* @param response
* @return: void
*/
@Transactional
public void downloadFile(String fileId, HttpServletResponse response) {
DemoFile item = demoFileMapper.findById(fileId);
String fileUrl = item.getFileUrl();
// path是指欲下载的文件的路径。
File file = new File(fileUrl);
if (file.exists()) {
String filename = item.getFileName() + "." + item.getFileExt();
// 设置响应头和客户端保存文件名
response.setCharacterEncoding("utf-8");
response.setContentType("multipart/form-data;charset=UTF-8");
response.setHeader("Content-Disposition", "attachment;fileName=" + filename);
// 用于记录以完成的下载的数据量，单位是byte
try {
// 打开本地文件流
InputStream inputStream = new FileInputStream(fileUrl);
// 激活下载操作
OutputStream os = response.getOutputStream();
// 循环写入输出流
byte[] b = new byte[2048];
int length;
while ((length = inputStream.read(b)) > 0) {
os.write(b, 0, length);
}
os.close();
inputStream.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
/**
* 删除附件信息
* @param fileIds
*/
@Transactional
public void delete(String fileIds) {
if (fileIds == null || "".equals(fileIds)) {
return;
}
String[] fileId = fileIds.split(",");
List<String> ids = new ArrayList<String>();
for (String id : fileId) {
if (id != null && id.trim().length() != 0) {
ids.add(id);
}
}
// 获取附件地址
List<DemoFile> itemList = demoFileMapper.findByIds(ids);
for (DemoFile item : itemList) {
File file = new File(item.getFileUrl());
// 删除服务器中附件信息
if (file.exists()) {
file.delete();
}
}
demoFileMapper.delete(ids);
}
}
8.常量类 FileConstUtil.java 主要定义上传文件中的一些常量，比如文件类型、提示信息等等
package com.project.util.file;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* @ClassName: FileConstUtil
* @Description: TODO文件信息常量类
* @author: HeMengZhu
* @date: 2018年2月28日 下午4:23:43
*/
public class FileConstUtil {
public static class FileMessage {
/**
* 文件不存在提示信息
*/
public static final String FILE_EXISTS = "文件不存在";
/**
* 上传附件支持的后缀格式
*/
public static final List<String> EXTS = Arrays.asList("doc", "docx", "xls", "xlsx", "ppt", "pptx");
/**
* 文件类型不正确提示信息
*/
public static final String FILE_EXT_ERROR = "请选择正确的文件（'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'）";
/**
* 文件的最大长度
*/
public static final long FILE_SIZE = 1073741824;
/**
* 文件超过设定大小后提示信息
*/
public static final String FILE_SIZE_LONG = "文件过大";
/**
* 上传成功提示信息
*/
public static final String SUCCESS_MESSAGE = "上传成功";
/**
* 上传失败提示信息
*/
public static final String ERROR_MESSAGE = "上传失败";
}
}
8.文件验证类 FileValidateUtil.java 用于验证用户上传文件的有效性
/**
* @Title: FileValidateUtil.java
* @Prject: gypt
* @Package: com.project.util.file
* @Description: TODO
* @author: HeMengZhu
* @date: 2018年3月1日 下午4:31:11
* @version: V1.0
*/
package com.project.util.file;
import java.util.List;
import org.activiti.engine.impl.util.json.JSONObject;
import org.springframework.web.multipart.MultipartFile;
/**
* @ClassName: FileValidateUtil
* @Description: TODO 验证上传附件的有效性
* @author: HeMengZhu
* @date: 2018年3月1日 下午4:31:11
*/
public class FileValidateUtil {
/**
* 验证上传附件的文件类型，大小等
* @Title: validateFile
* @Description: TODO
* @param file
* @return
* @return: JSONObject
*/
public static final JSONObject validateFile(MultipartFile file, List<String> exts) {
JSONObject obj = new JSONObject();
if (file.isEmpty()) {
// 文件不存在
obj.put("state", FileConstUtil.FileMessage.FILE_EXISTS);
} else if (!exts.contains(file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1))) {
// 文件类型不满足
obj.put("state", FileConstUtil.FileMessage.FILE_EXT_ERROR);
} else if (file.getSize() > FileConstUtil.FileMessage.FILE_SIZE) {
obj.put("state", FileConstUtil.FileMessage.FILE_SIZE_LONG);
}
return obj;
}
}
9.Mapper层 DemoStudentMapper.java 接口，与XML文件相对应，实现对数据库的访问和操作
package com.project.mapper.demo;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import com.project.entity.demo.DemoStudent;
/**
* @author hmz 2018年02月27日 下午8:01:00 示例-测试学生Mapper
*/
@Repository
public interface DemoStudentMapper {
/**
* 修改附件ID
* @Title: updateFkFileId
* @Description: TODO
* @param params
* @return: boolean
*/
boolean updateFkFileId(Map<String, String> params);
}
10.Mapper层 DemoStudentMapper.xml 主要包含数据库字段和实体类的映射关系和对数据库执行的SQL语句
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.project.mapper.demo.DemoStudentMapper">
<!-- 上传附件保存附件ID -->
<update id="updateFkFileId" parameterType="java.util.Map" >
UPDATE demo_student
SET fk_file_id = #{fkFileId}
WHERE stu_id = #{stuId} LIMIT 1 ;
</update>
</mapper>
11.Mapper层 DemoStudentMapper.java 接口，与XML文件相对应，实现对数据库的访问和操作
package com.project.mapper.demo;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import com.project.entity.demo.DemoFile;
/**
* @ClassName: DemoFileMapper
* @Description: TODO 上传文件Mapper
* @author: HeMengZhu
* @date: 2018年3月1日 下午4:01:10
*/
@Repository
public interface DemoFileMapper {
/**
* 上传附件信息
* @param item
* @return
*/
boolean insert(DemoFile item);
/**
* 根据ID查找附件信息
* @param fileId
* @return
*/
DemoFile findById(@Param("fileId") String fileId);
/**
* 根据ID查找附件信息
* @Title: findByIds
* @Description: TODO
* @param fileIds
* @return
* @return: List<DemoFile>
*/
List<DemoFile> findByIds(@Param("fileIds") List<String> fileIds);
/**
* 删除附件信息
* @param fileIds
*/
void delete(@Param("fileIds") List<String> fileIds);
}
12.Mapper层 DemoFileMapper.xml 主要包含数据库字段和实体类的映射关系和对数据库执行的SQL语句
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.project.mapper.demo.DemoFileMapper">
<resultMap id="fileResultMap" type="com.project.entity.demo.DemoFile">
<id property="fileId" column="file_id"/>
<result property="fileName" column="file_name"/>
<result property="fileExt" column="file_ext"/>
<result property="fileUrl" column="file_url"/>
</resultMap>
<insert id="insert" parameterType="com.project.entity.demo.DemoFile">
INSERT INTO demo_file ( file_id, file_name, file_ext, file_url )
VALUES (#{fileId}, #{fileName}, #{fileExt}, #{fileUrl});
</insert>
<select id="findById" resultType="com.project.entity.demo.DemoFile" parameterType="String">
SELECT a.file_id as fileId, a.file_name as fileName, a.file_ext as fileExt,a.file_url as fileUrl FROM demo_file a
where a.file_id = #{fileId}
LIMIT 1 ;
</select>
<select id="findByIds" parameterType="String" resultMap="fileResultMap">
SELECT a.file_url as fileUrl
FROM demo_file a
WHERE a.file_id in (
<foreach collection="fileIds" item="fileId" separator=" ,">
#{fileId}
</foreach>
);
</select>
<delete id="delete" parameterType="String">
DELETE FROM demo_file
WHERE file_id in (
<foreach collection="fileIds" item="fileId" separator=" ,">
#{fileId}
</foreach>
);
</delete>
</mapper>
