文件类型 Extension MIME Type:
<br />
.doc application/msword .dot application/msword .docx
application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx
application/vnd.openxmlformats-officedocument.wordprocessingml.template
.docm application/vnd.ms-word.document.macroEnabled.12 .dotm
application/vnd.ms-word.template.macroEnabled.12 .xls
application/vnd.ms-excel .xlt application/vnd.ms-excel .xla
application/vnd.ms-excel .xlsx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xltx
application/vnd.openxmlformats-officedocument.spreadsheetml.template
.xlsm application/vnd.ms-excel.sheet.macroEnabled.12 .xltm
application/vnd.ms-excel.template.macroEnabled.12 .xlam
application/vnd.ms-excel.addin.macroEnabled.12 .xlsb
application/vnd.ms-excel.sheet.binary.macroEnabled.12 .ppt
application/vnd.ms-powerpoint .pot application/vnd.ms-powerpoint .pps
application/vnd.ms-powerpoint .ppa application/vnd.ms-powerpoint .pptx
application/vnd.openxmlformats-officedocument.presentationml.presentation
.potx
application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx
application/vnd.openxmlformats-officedocument.presentationml.slideshow
.ppam application/vnd.ms-powerpoint.addin.macroEnabled.12 .pptm
application/vnd.ms-powerpoint.presentation.macroEnabled.12 .potm
application/vnd.ms-powerpoint.template.macroEnabled.12 .ppsm
application/vnd.ms-powerpoint.slideshow.macroEnabled.12 .mdb
application/vnd.ms-access
表单上传文件
<form
class="form-signin"
action="/api/v1/pub/upload/form/uploadfile"
method="post"
enctype="multipart/form-data"
>
<p><input type="file" name="myfile" /></p>
<p><input type="submit" value="单文件上传" /></p>
</form>
<br /><br />
<form
class="form-signin"
action="/api/v1/pub/upload/form/MultiFile"
method="post"
enctype="multipart/form-data"
>
<!-- <p><input type="file" name="myfile" multiple/>一次选多个文件</p> -->
<p><input type="file" name="myfile" /></p>
<p><input type="file" name="myfile" /></p>
<p><input type="submit" value="多文件上传" /></p>
</form>
<form enctype="multipart/form-data" id="ajaxForm">
文件一:<input type="file" name="file" /><br />
<!-- 进行异步的表单提交，不会跳转页面而是刷新该页面 -->
<!-- 按钮不能是submit代表同步提交的意思，否则会刷新页面-->
<input type="button" value="上传头像" id="btn" />
</form>
异步上传文件的基本元素信息
/**
* 上传文件的格式：
* lastModified: 1602664687923
* lastModifiedDate: Wed Oct 14 2020 16:38:07 GMT+0800 (中国标准时间) {}
* name: "3d.jpg"
* size: 70482
* type: "image/jpeg"
* webkitRelativePath: ""
* [[Prototype]]: File
*
*
* 获取方式一： 本元素触发onChange事件
* const file = e.target.files[0]
*
* 获取方式二： click事件获取他文件元素
* jquery方式: const file = $("#ajaxFile").get(0).files[0] 或者 $("#ajaxFile")[0].files[0]
* 原生js方式: const file = document.getElementById("ajaxFile").files[0]
*
* 多文件元素 设置属性：multiple
* <input type="file" multiple />
*
* 模拟表单数据格式
* let formData = new FormData()
* formData.append("fileName",file)
*
* */
异步上传文件（单文件)
<input type="file" id="ajaxFile" @change="JqueryFile($event)" />
<input type="file" id="xmlFile" />
方式一 jquery
JqueryFile(e) {
console.log(e.target.files[0])
let file = $("#ajaxFile").get(0).files[0] // 这两种获取的数据相同
// let file = $("#ajaxFile").[0].files[0]
console.log(file)
let fdata = new FormData()
fdata.append("myfile", file)
// return
$.ajax({
url: "/api/v1/pub/upload/file/uploadfile",
type: "post",
data: FormData,
processData: false, // 告诉jQuery不要处理发送的数据
contentType: false, // 告诉jQuery不要设置Content-Type请求头
success: function (data) {
alert(data)
console.log(data)
// $("#img").attr("src", data)
}
})
},
方式二 原生js:
xmlFil() {
// 获取文件上传的input元素
const inputElement = document.getElementById("xmlFile")
inputElement.addEventListener("change", function (e) {
const file = e.target.files[0] // 获取文件对象
const formData = new FormData() // 创建FormData对象用于构建表单数据
formData.append("myfile", file) // 将文件添加到FormData对象中
console.log(inputElement.files[0])
console.log(file)
// 创建Ajax请求
const xhr = new XMLHttpRequest()
xhr.open("POST", "/api/v1/pub/upload/file/uploadfile", true) // 设置请求方法、URL和异步
xhr.onload = function () {
if (this.status === 200) {
console.log(this.responseText) // 上传成功后的处理逻辑
}
}
xhr.send(formData) // 发送请求
})
},
异步上传文件（多文件）
<form class="multiple-form">
<input type="file" multiple id="ajaxMultipleFile1" />
<input type="submit" value="提交表单" />
</form>
xmlMultipleFile1() {
// 假设有一个<form>元素，其中包含一个文件输入<input type="file" multiple>
const formElement = document.querySelector(".multiple-form")
const fileInput = formElement.querySelector(
'input[type="file"][multiple]'
)
// 当表单被提交时，触发文件上传
formElement.addEventListener("submit", function (event) {
event.preventDefault() // 阻止表单默认行为
const files = fileInput.files
console.log(files)
const url = "/api/v1/pub/upload/file/uploadfile" // 替换为你的上传API地址
const fdata = new FormData()
for (let i = 0; i < files.length; i++) {
fdata.append("myfile", files[i])
}
fetch(url, {
method: "POST",
body: fdata
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error))
})
},
<input
type="file"
multiple
id="ajaxMultipleFile2"
@change="xmlMultipleFile2($event)"
/>
xmlMultipleFile2(e) {
const files = e.target.files
console.log(files)
const url = "/api/v1/pub/upload/file/uploadfile" // 替换为你的上传API地址
const data = new FormData()
for (let i = 0; i < files.length; i++) {
data.append("myfile", files[i])
}
fetch(url, {
method: "POST",
body: data,
headers: {
"Content-Type": "multipart/form-data"
}
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error))
}
