js 文件上传

上传单个文件

前端

function checkAndSaveFlie() {
        var resourceFile = $("#resourceFile").val();
        // var imageFileUrl = $("#imageFileUrl").val();
        var resourceTitle = $("#resourceTitle").val();
        if(__isEmpty(resourceFile)){
            layer.tips("请选择文件", '#resourceFile', {
                tips: [1, '#AE81FF']
            });
            return false;
        }
        if(__isEmpty(resourceTitle)){
            layer.tips("请输入标题!", '#resourceTitle', {
                tips: [1, '#AE81FF']
            });
            return false;
        }
        var files = $("#resourceFile").prop("files");

        if (files && files.length > 0) {
            // 获取目前上传的文件
            file = files[0];
            var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|.xls|.xlsx|.doc|.docx";//文件类型
            var fileName = file.name;
            var fileFix = fileName.substring(fileName.lastIndexOf(".") + 1).toLocaleLowerCase();
            // //console.log(fileFix);
            // 校验文件大小
            if (file.size > 1024 * 1024 * 100) {
                bootboxAlert("错误提示",'文件大小不能超过 100MB!');
                $("#resourceFile").val("");
                return false;
            }
            //校验图片类型
            // if (AllImgExt.indexOf(fileFix + "|") == -1) {
            //     bootboxAlert("错误提示","文件类型不支持!仅支持jpg,jpeg,gif,bmp,png,xls,xlsx,doc,docx类型文件!");
            //     $("#resourceFile").val("");
            //     return false;
            // }
            uploadFile(file,resourceTitle);
        }
    }

    //上传图片 oss
    function uploadFile(file,resourceTitle) {
        var index = layer.load(1,
            {
                zIndex : layer.zIndex,
                shade: [0.1,'#000'], //0.1透明度的白色背景
                offset:"10px"
            });
        var formData = new FormData();
        //接口接收参数 键值形式 添加到formData中
        uploadFlag = true;
        formData.append("file", file);
        formData.append("resourceTitle", resourceTitle);
        formData.append("projectId", projectId);
        formData.append("taskInfoId", taskInfoId);
        formData.append("projectTaskId", projectTask.id);
        $.ajax({
            url: baseUrl + 'saveResource',//url地址
            type: 'post',
            data: formData,
            async: true,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.ErrCode == "0") {
                    layer.msg('上传成功');
                    getResources(resourcesPage);
                    getModifiedLog(1);
                    layer.close(resourceLayer);
                    layer.close(index);
                } else {
                    bootboxAlert("错误提示","上传失败");
                    layer.close(index);
                }

            }
        });
    }

后端

/**
     * 上传并保存文件
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/saveResource",produces="text/json;charset=UTF-8", method= RequestMethod.POST)
    @ResponseBody
    public Object saveProjectTaskResource(MultipartFile file, HttpServletRequest request) throws Exception {
        //request和file都有了,代码自己写
    }

上传多个文件
前端

function checkAndSaveFlie() {
        var resourceFile = $("#resourceFile").val();
        // var imageFileUrl = $("#imageFileUrl").val();
        var resourceTitle = $("#resourceTitle").val();
        if(__isEmpty(resourceFile)){
            layer.tips("请选择文件", '#resourceFile', {
                tips: [1, '#AE81FF']
            });
            return false;
        }
        if(__isEmpty(resourceTitle)){
            layer.tips("请输入标题!", '#resourceTitle', {
                tips: [1, '#AE81FF']
            });
            return false;
        }
        var files = $("#resourceFile")[0].files;

        if (files && files.length > 0) {
            // 获取目前上传的文件
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var fileName = file.name;

                // 校验文件大小
                if (file.size > 1024 * 1024 * 100) {
                    bootboxAlert("错误提示",'单个文件大小不能超过 100MB! 文件名:'+fileName);
                    $("#resourceFile").val("");
                    return false;
                }
            }




            var AllImgExt = ".jpg|.jpeg|.gif|.bmp|.png|.xls|.xlsx|.doc|.docx";//文件类型

            var fileFix = fileName.substring(fileName.lastIndexOf(".") + 1).toLocaleLowerCase();
            // //console.log(fileFix);

            //校验图片类型
            // if (AllImgExt.indexOf(fileFix + "|") == -1) {
            //     bootboxAlert("错误提示","文件类型不支持!仅支持jpg,jpeg,gif,bmp,png,xls,xlsx,doc,docx类型文件!");
            //     $("#resourceFile").val("");
            //     return false;
            // }
            uploadFile(files,resourceTitle);
        }
    }

    //上传图片 oss
    function uploadFile(files,resourceTitle) {
        var index = layer.load(1,
            {
                zIndex : layer.zIndex,
                shade: [0.1,'#000'], //0.1透明度的白色背景
                offset:"10px"
            });
        var formData = new FormData();
        //接口接收参数 键值形式 添加到formData中
        uploadFlag = true;
        for (var i = 0; i < files.length; i++) {
            formData.append("files", files[i]);
        }
        formData.append("resourceTitle", resourceTitle);
        formData.append("projectId", projectId);
        formData.append("taskInfoId", taskInfoId);
        formData.append("projectTaskId", projectTask.id);
        $.ajax({
            url: baseUrl + 'saveResources',//url地址
            type: 'post',
            data: formData,
            async: true,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.ErrCode == "0") {
                    layer.msg('上传成功');
                    getResources(resourcesPage);
                    getModifiedLog(1);
                    layer.close(resourceLayer);
                } else {
                    bootboxAlert("错误提示","上传失败");
                }
                layer.close(index);
            }
        });
    }

后端

/**
     * 上传并保存文件
     * @param files
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/saveResources",produces="text/json;charset=UTF-8", method= RequestMethod.POST)
    @ResponseBody
    public Object saveProjectTaskResources(MultipartFile[] files, HttpServletRequest request) throws Exception {
        //同上
    }