AjaxFileUpload实现文件上传

此例为maven项目,实现学生模块中简历的上传操作。所用框架为SSM框架。
此处将下载文件、删除文件的方法统一展示,因为这是上传配套的功能,不作另外阐述。
AjaxFileUpload.js文件可在百度自行下载,下载后放入项目中,并在页面中引用即可。
1.JSP 构建一个隐藏的文件域,当点击上传简历时,模拟点击文件域,弹窗文件选择框;下载文件仅是做了一个超链接,指向后台下载请求地址,同时将fileId作为参数传向后台即可。

上传简历

"+下载“文件名”+"

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 params = new HashMap();
        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 ids = new ArrayList();
        for (String id : fileId) {
            if (id != null && id.trim().length() != 0) {
                ids.add(id);
            }
        }
        // 获取附件地址
        List 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 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 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 params);
}

10.Mapper层 DemoStudentMapper.xml 主要包含数据库字段和实体类的映射关系和对数据库执行的SQL语句




    
      
        UPDATE demo_student
        SET fk_file_id = #{fkFileId} 
        WHERE stu_id = #{stuId} LIMIT 1 ;
    

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
     */
    List findByIds(@Param("fileIds") List fileIds);
    /**
     * 删除附件信息
     * @param fileIds
     */
    void delete(@Param("fileIds") List fileIds);
}

12.Mapper层 DemoFileMapper.xml 主要包含数据库字段和实体类的映射关系和对数据库执行的SQL语句





    
        
        
        
        
    
    
    
        INSERT INTO demo_file ( file_id, file_name, file_ext, file_url )
        VALUES (#{fileId}, #{fileName}, #{fileExt}, #{fileUrl});
    
    
    
    
    
    
    
        DELETE FROM demo_file
        WHERE file_id in (
        
            #{fileId}
        
        );
    

你可能感兴趣的:(AjaxFileUpload实现文件上传)