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