文件上传下载简单js封装

1.js代码(最后更新时间2020-3-3)

var fileUpload={
        //进行文件上传
        //file_id:        文件input的id
        //return_url_id:  文件url要保存到的input的id
        //return_name_id: 文件名称要保存到的input的id
        fileUpload:function(file_id,return_url_id,return_name_id){
            var formData = new FormData();
            formData.append("file",$("#"+file_id)[0].files[0])
            $.ajax({
                url: '${request.contextPath}/file/file_upload',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(o) {
                    if(o.code==1){
                        $("#"+return_name_id).val(o.fileName);
                        $("#"+return_url_id).val(o.path);
                    }else{
                        Message.error(o.msg);
                    }
                },
                error: function(data) {
                }
            });
        },
        //验证文件的格式与大小,验证通过返回true,否则返回false
        //file_id:           文件input的id
        //correct_file_type: 正确的文件类型,数据类型是数组
        //fileSize           文件的大小,以kb为单位
        file_format_verify:function(file_id,correct_file_type,correct_file_size){
            var file = $("#"+file_id);
            var filePath = file.val();
            if("" != filePath){
                var fileType = fileUpload.getFileType(filePath);
                //判断上传的附件格式

                //是否是指定的格式
                var is_correct=false;
                for(var i=0;i"
                        }
                    }
                    Message.error(text);
                    file.val("");
                    return false;
                }
                //获取附件大小（单位：KB）
                var fileSize = document.getElementById("file").files[0].size / 1024;
                if(fileSize > correct_file_size){
                    Message.error("文件大小不能超过"+(fileSize/1024)+"Mb");
                    file.val("");
                    return false;
                }
                return true;
            }
            return false;
        },
        //验证文件的格式与大小,使用默认的设置
        file_format:function(file_id){
            var correct_file_type=["pdf","txt","xls","xlsx","ppt","pptx","doc","docx","png","jpg","jpeg","mp4","mp3","avi","zip","rar文件格式"];
            return fileUpload.file_format_verify(file_id,correct_file_type,102400)
        },

        getFileType:function(filePath){
            var startIndex = filePath.lastIndexOf(".");
            if(startIndex != -1)
                return filePath.substring(startIndex+1, filePath.length).toLowerCase();
            else return "";
        },
        download:function (path_id,fileName_id) {
            var path=$("#"+path_id).val();
            var fileName=$("#"+fileName_id).val();
            fileUpload.downloadFile(path,fileName);
        },
        downloadFile:function (path,fileName) {
            path=encodeURIComponent(path)
            fileName=encodeURIComponent(fileName)
            $.post("${request.contextPath}/file/fileIsExist",{"path":path},function(o){
                if(o.code==1){
                    window.location.href="${request.contextPath}/file/download?path="+path+"&fileName="+fileName;
                }else{
                    Message.error(o.msg);
                }
            });

        }
    }

2.编辑页面的上传与下载

• 样式:

  
  
  样式
• html
• attachmenturl和filename分别对应Model的字段,是文件的url和文件的名称.
• 三个input的id可不用修改,只是用来标记.多文件上传可以通过不同的id进行区分

                            

                                附件 
                                

                                    
                                    
                                    
                                    下载原文件
                                
                            

• 文件回显和上传方法
• fileUpload.file_format("file")是用来验证文件的格式与大小,如果不需要可以去掉.有其他需求可用 file_format_verify(file_id,correct_file_type,correct_file_size)方法去指定文件的类型和大小

var E={
          load:function(){
                $.getJSON("${request.contextPath}/notice/v1/get/"+$("#id").val(),function(o){
                    if(o.code ==1){
                        $("#form1").setFormValues(o.data);
                        if(!Utils.isEmpty(o.data.filename)){
                            $("#download1").show();
                            $("#download1").html("下载原文件:"+o.data.filename)
                        }
                    }
                });
            },
            file_upload:function () {
                if(fileUpload.file_format("file")){
                    fileUpload.fileUpload("file","file_url","file_name")
                }
            },          
    }

3.index页面的下载

• FILENAME和ATTACHMENTURL需要根据实际字段进行修改

{"hidden":false,"align":"left","sortable":false,"name":"FILENAME","resizable":true,"label":"附件",
        formatter:function(cellValue, options, rowObject){
            var temp = "";
            if(!Utils.isEmpty(cellValue)) {
                var path=encodeURIComponent( rowObject.ATTACHMENTURL);
                var fileName=encodeURIComponent(rowObject.FILENAME);
                var fun="fileUpload.downloadFile(\"" + path+ "\",\""+fileName+"\")";
                temp = cellValue + "";
            }
            return temp;
        }
    },