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) { // 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

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

在ts文件中引入js模块，编写声明文件的方法
一.声明文件的作用在ts文件中引入js文件,由于js代码中没有类型约束,所以ts无法获得js代码的类型信息,进而会隐式推断js中类型为any,失去了ts代码类型推断和约束的作用,声明文件就是将一个j ...
html点击按钮文件上传,js点击按钮实现文件上传
点击按钮实现文件上传点击按钮实现文件上传 $('#uploadFileButton').click(function () { $('#upload').click(); }); $('#uploa ...
php手机端多图预览上传,JS实现多图预览上传的实例代码
这篇文章主要介绍了JS实现多张图片预览同步上传功能的相关资料,需要的朋友可以参考下废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by liujing on 201 ...
tomcat idea项目访问、下载web项目外的静态资源（图片、文件），js下载项目外的文件，server.xml设置对idea中的项目不生效
读取项目外的文件,配置Tomcta的虚拟路径, 打开文件:Tomcat/conf/server.xml 修改文件配置: <Host name="localhost" ap ...
webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
JS逐页转pdf文件为图片格式
背景年前的时候,开发一个电子杂志项目,功能需求是通过上传pdf文件,将其转为图片格式,所以杂志的内容其实就是一张张图片不过当时技术要求用后端实现,所以使用的是PHP实现该功能.项目完成后,寻思着在 ...
源生ajax同步异步请求,源生JS怎样实现文件异步上传
这次给大家带来源生JS怎样实现文件异步上传,源生JS实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下. 名称文件确定 function ajaxUploadFile() { var ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
图片和文件上传js剖析
/** * 商户资质信息模块js * * 涉及页面组件 { * 上传组件(UploadFileComponent) * } * * * 初始化工具(init) * * @Author:Waver */ ...

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

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

最新文章

热门文章