javaweb使用ajax实现文件上传

在javaweb中，使用ajax实现文件上传预览

1.表单：

javaweb使用ajax实现文件上传

　　-设置input type="file",multiple="multiple"可以选择多个文件，id是用来获取element，上面的hidden是用来保存字段值，即保存最终的文件名称，可能是多个

2.js:

<script type="text/javascript">
    var inputEle = document.getElementById('file1');
    inputEle.onchange = function (e) {
        var formData = new FormData();
        for (var i = 0; i < this.files.length; i++) {
            var file = this.files[i];
            console.log(file);
            formData.append('file', file);
        };
        formData.append('eId', ${dInfo.enterpriseId});
        // formData.append(其他参数)

        if(this.files.length > 0){  //有文件就call后台，没有就不call
            var type="handleagreementattachment";
            var falg="fileFlag1";
            fileUpload(formData,type,falg);
        }
    }

    //文件上传，call后台
    function fileUpload(formData,type,flag) {
        $.ajax({
            url: "${ctx}/file/fileUtil/FileUpload",
            type: 'POST',
            cache: false,
            processData: false,
            contentType: false,
            enctype:"multipart/form-data",
            dataType:"json",
            data: formData,
            async:false,
            error: function (request) {
                alert("服务器故障");
            },
            success: function (data) {
                console.log(data);  //wasterwatermonitorattachment
                var fileValue = $("#"+ type +"").val();
                for(var i=0;i<data.length;i++){
                    fileValue += data[i]["fileName"]+";";

                    //回显预览
                    var radom = Math.random().toString(36).substring(2);
                    $("#"+ flag +"").append("<li id='"+ radom +"'><a href='"+ data[i]["fileAdd"]+data[i]["fileName"] +"' style='60px;' title="+ data[i]["fileName"] +">" +
                        "<img src='${ctxStatic}/hb/fileimages/"+ data[i]["type"] +".png' alt='' style='margin-bottom: 10px'/><b>"+ data[i]["shortName"] +"</b></a>" +
                        "<b style='color:red;cursor:pointer;' onclick=delFile('"+ radom +"','"+ data[i]["fileName"] +"','"+ type +"');>删除</b></li>");
                }
                $("#"+ type +"").val(fileValue);
            }
        });
    }

    //删除文件
    function delFile(id,name,type) {
        var a = confirm("确认删除 " + name + " 吗？");
        if(a==true){
            var node = document.getElementById(id);
            node.remove();  //删除这个节点

            var value = $("#"+ type +"").val(); //获取本来的字段值
            value = value.replace(name+";",""); //删除其中的某个文件
            $("#"+ type +"").val(value);    //重新赋值
            return true;
        }else{
            return false;
        }
    }
</script>

　　要注意这一块script要放到<body>的最下面，否则会导致 inputEle 获取不到element,因为页面没有加载完成；ajax call的时候只需要传递 formData 就可以了，我这边是业务需求所以多了几个对象。

3.java后台接收并处理文件，接收的时候可以debug一下，这里可以获取到很多的文件属性。我这边写了一个公用的后台，不管哪里使用，直接call这里就好了。

　　这里上传的文件可能是多个 MultiparFile[] 来接收文件参数，返回给前端的是一个文件对象的集合，业务需要，所以用文件对象来存储文件的各种属性。

package com.zhouhe.modules.myUtils;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
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 javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * 文件上传
 * @Author zhouhe
 * @Date 2019/12/5 13:07
 */
@Controller
@RequestMapping(value = "${adminPath}/file/fileUtil")
public class FileController {
    /**
     *  文件上传，ajax 方式
     * @param request
     * @param model
     * @param file
     * @return
     */
    @ResponseBody
    @RequestMapping(value="/FileUpload", method = RequestMethod.POST)
    public List<FileEntity> FileUpload(HttpServletRequest request, Model model,@RequestParam(value="file",required=false) MultipartFile[] file) {
//        List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
        
        String eId = request.getParameter("eId");   //企业 id
        List<FileEntity> fileList = FileUpload.uploadFiles(file,eId);

        return fileList;
    }
}

　　4.下面是调用文件上传Util

package com.zhouhe.modules.myUtils;

import com.zhouhe.modules.api.util.Constants;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * 文件上传 ajax 方式
 * @Author zhouhe
 * @Date 2019/12/5 13:12
 */
public class FileUpload {
    private static Logger logger = LoggerFactory.getLogger(FileUpload.class);

    public static final String FILE_URL = Constants.LOCAL_FILE_URL;    //本地路径
//    public static final String FILE_URL = Constants.BASE_FILE_URL;    //服务器部署路径


    /**
     *  多个文件上传，循环调用单个文件上传的方法
     * @param file
     * @param folder
     * @return
     */
    public static List<FileEntity> uploadFiles(MultipartFile[] file,String folder){
        String fileFolder = FILE_URL+ "ea/" + folder;  //一起一档的文件目录是 基础目录 + ea + 企业id

        List<FileEntity> fileList = new ArrayList<FileEntity>();

        File isFolder = new File(fileFolder);
        if (!isFolder.exists()) {
            isFolder.mkdirs();
        }

        for(int i=0;i<file.length;i++){
            fileList.add(uploadFile(file[i],fileFolder,folder));
        }
        return fileList;
    }

    /**
     *  上传文件(单个)
     *  1.Constants.LOCAL_FILE_URL 是本地文件存储路径，部署要换成 Constants.BASE_FILE_URL
     *  2.jsp 表单提交的时候要设置 method="post" enctype="multipart/form-data"
     *  3.要在 springmvc 中有对上传文件的大小做限制
     *  4.要考虑传递过来的是多个文件问题，暂时没有实现
     *
     * @param upFile 页面传过来的文件
     * @param fileFolder 上传文件的全路径
     * @param folder 存储的文件夹 这里是企业id
     * @return 文件对象
     */
    public static FileEntity uploadFile(MultipartFile upFile,String fileFolder, String folder){
        //定义返回对象，返回文件对象
        FileEntity f = new FileEntity();
        if (upFile.getSize() > 0) {
            // 得到文件的原始名称，如：美女.png
            String fileName = upFile.getOriginalFilename();
            File file = new File(fileFolder,fileName);
            try {
                upFile.transferTo(file);    //上传文件

                String fileRoute = Constants.DOWNLOAD_URL +"ea/"+folder+"/";  //文件下载路径，服务器路径
                f.setFileAdd(fileRoute);
                f.setFileName(fileName);  //文件名
                f.setShortName(shortName(fileName));  //文件缩略名
                f.setSuffix(fileName.substring(fileName.lastIndexOf(".") + 1)); //后缀
                f.setType(getType(fileName.substring(fileName.lastIndexOf(".") + 1)));  //文件类型

                return f;   //返回文件对象
            } catch (IOException e) {
                e.printStackTrace();
                logger.debug("上传文件失败");
            }
        }
        return null;
    }

    /**
     *  文件缩略名
     *  保留4个字符，后面用 ... 代替
     * @param name
     * @return
     */
    public static String shortName(String name){
        if(name.length() > 4){
            String str = name.substring(4,name.length());
            name = name.replace(str,"...");
        }
        return name;
    }

    /**
     * 根据文件后缀判断文件类型
     * @param name
     * @return
     */
    public static String getType(String name){
        if ("pdf".equals(name)) {
            return "pdf";
        } else if ("excel".equals(name)) {
            return "excel";
        } else if ("xls".equals(name)) {
            return "excel";
        } else if ("xlsx".equals(name)) {
            return "excel";
        } else if ("docx".equals(name)) {
            return "word";
        } else if ("doc".equals(name)) {
            return "word";
        } else if ("png".equals(name)) {
            return "png";
        } else if ("jpg".equals(name)) {
            return "png";
        } else if ("jpeg".equals(name)) {
            return "png";
        } else if ("rar".equals(name)) {
            return "zip";
        } else if ("ppt".equals(name)) {
            return "ppt";
        } else if ("pptx".equals(name)) {
            return "ppt";
        }else {
            return "txt";
        }
    }
}

　　5.文件属性类

package com.zhouhe.modules.myUtils;

/**
 * 文件属性类
 * @Author zhouhe
 * @Date 2019/12/3 16:17
 */
public class FileEntity {
    private String fileName;    //文件名称
    private String shortName;   //文件缩略名
    private String fileAdd;     //文件地址
    private String suffix;      //文件后缀
    private String type;        //文件类型

    public String getShortName() {
        return shortName;
    }

    public void setShortName(String shortName) {
        this.shortName = shortName;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getFileAdd() {
        return fileAdd;
    }

    public void setFileAdd(String fileAdd) {
        this.fileAdd = fileAdd;
    }

    public String getSuffix() {
        return suffix;
    }

    public void setSuffix(String suffix) {
        this.suffix = suffix;
    }
}

　　6.文件预览的话只需要把文件属性传递到页面即可

javaweb使用ajax实现文件上传

javaweb使用ajax实现文件上传

相关推荐