ajax多文件上传，js限制上传文件大小，文件上传前在浏览器展示

文件上传是非常常见的功能，这里实现一个多文件上传的例子，前端能够控制上传文件的大小，并在前端展示选择的文件的信息，采用vue+jquery+springboot实现。效果如下：

点击生成的图片可以直接预览pdf。

前端实现代码如下：

html:直接往组件传入文件上传的url:

js:(采用vue渲染用户选择的文件信息，以便于在页面进行展示)

Vue.component('file-up-com', {
    props: {
        url:{
            type: String,
            required: true
        }
    },
    data(){
        return {
            fileUrlList: [],//{fileUrl: "", cls: "", isImg: false, name: ""}
            rquestUrl: this.url,
            fileAmount: 0
        }
    },
    methods: {
        chooseFile(){
            const $fileBtnNode = $("#chooseFiles");
            var formFiles = $fileBtnNode[0].files;
            this.fileAmount = 0;
            if (formFiles.length > 5) {
                window.alert("最多只能选择五个文件");
                $fileBtnNode.val('');
                return false;
            }
            var newFileUrls = new Array();
            for (let index = 0; index < formFiles.length; index++) {
                let file = formFiles[index];
                if (file.size > 1024 * 3072){
                    window.alert("文件大小不能超过3M");
                    $fileBtnNode.val('');
                    return false;
                }
                var fileLocUrl = this.getFileLocUrl(file);
                var fileSuffix = this.getFileSuffix(file);
                var urlItem = {};
                if ( /^(jpg|jpeg|png|gif|bmp)$/i.test(fileSuffix) ) {//是图片
                    urlItem.fileUrl = fileLocUrl;
                    urlItem.name = file.name;
                    urlItem.isImg = true;
                } else {
                    urlItem.isImg = false;
                    urlItem.fileUrl = fileLocUrl;
                    switch (fileSuffix) {
                        case 'pdf':case "PDF":
                            urlItem.cls = "file-href-pdf";
                            break;
                        case 'doc': case 'docx': case 'wps': case 'WPS': case 'txt': case 'TXT':
                            urlItem.cls = "file-href-word";
                            break;
                        default:
                            urlItem.cls = "file-href-other";
                    }
                }
                newFileUrls.push(urlItem);
            }
            this.fileUrlList = newFileUrls;
            this.fileAmount = formFiles.length;
        },
        submitFile(){
            if (this.fileAmount < 1) {
                return false;
            }
            const that = this;
            var formFiles = $("#chooseFiles")[0].files;
            const fileData = new FormData();
            for (let index = 0; index < formFiles.length; index++) {
                let file = formFiles[index];
                if (file.size > 1024 * 3072){
                    window.alert("文件大小不能超过3M");
                    return false;
                }
                fileData.append("files", file);
            }
            $.ajax({
                type: "POST",
                url: that.rquestUrl,
                contentType: false,
                processData: false,
                data: fileData,
                dataType: "json",
                success: function (response) {
                    window.confirm("suc");
                }
            });
        },
        /**
         * 获取文件后缀名
         * @param {*} file
         */
        getFileSuffix(file){
            const fileName = file.name;
            return fileName.substring( fileName.lastIndexOf(".") + 1, fileName.length);
        },
        /**
         * 创建一个 DOMString，其中包含一个表示参数中给出的对象的URL
         * @param {*} file
         */
        getFileLocUrl(file){
            var url = "#";
            if (window.createObjectURL) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url;
        }
    },
    template: '<div>' +
        '<input id="chooseFiles" v-on:change="chooseFile" type="file" multiple="multiple"/>' +
        '<button @click="submitFile">上传</button>' +
        '<div class="file-preview">' +
            '<template v-for="item in fileUrlList">' +
                '<img v-if="item.isImg" :alt="item.name" :src="item.fileUrl" width="100px" height="75px"/>' +
                '<a v-else :href="item.fileUrl" class="file-href" :class="item.cls" target="_blank"></a>' +
            '</template>' +
        '</div>' +
    '</div>'
});

css:

后端代码：

后端采用的是springboot，要是直接使用javaweb接收多文件的话，可以使用request.getParts()的方式进行获取。

总的效果如下：点击pdf图标可以显示内容：

如果上传的是图片的话，直接在当前页面展示图片的内容：

代码位置：https://gitee.com/tandatda/springCloud/tree/master/mybatis_demo/src/main/resources/static