文件上傳是非常常見的功能，這里實現一個多文件上傳的例子，前端能夠控制上傳文件的大小，并在前端展示選擇的文件的信息，采用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) { // basicurl = window.createObjectURL(file) ;} else if (window.URL) { // mozilla(firefox)url = window.URL.createObjectURL(file) ;} else if (window.webkitURL) { // webkit or chromeurl = 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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ajax多文件上传，js限制上传文件大小，文件上传前在浏览器展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。