<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01图片上传及回显</title>
</head>
<body>
<div class="upload-cont">
<input id="imgUploader" type="file" placeholder="点击上传" onchange="uploadImg(event)" value="">
</div>
</body>
<script language="javaScript">
const imgUploader = document.querySelector("#imgUploader")
const uploadCont = document.querySelector(".upload-cont")
// 文件上传分为三步:文件获取、文件上传、图片回显
function uploadImg(event) {
let file = getFile(event)
console.log('file',file)
if(file) {
post('',file,{header: {'content-type': 'multipart/form-data'}}).then(res=>{
console.log('res',res)
})
}
}
function getFile(event) { //获取文件
console.log('imgUploader', imgUploader.value)
console.log('event',event)
const file = event.target.files[0]
const imgTypes = ['jpg','png','jpeg']
let index = file.name.indexOf('.')
let fileType = file.name.substring(index+1)
let fileTypeFlag = true,fileSizeFlag = true
if (!imgTypes.includes(fileType)) {
alert('只能上传xxx格式图片')
fileTypeFlag = false
return false
}
if(file.size/1024/1024>10) {
alert('图片不能大于10M')
fileSizeFlag = false
return false
}
if(fileTypeFlag&&fileSizeFlag) {
const formData = new FormData()
formData.append('file',file)
const fileReader = new FileReader()
fileReader.onload = function() {
formData.append('file',file)
console.log('result',fileReader.result)
// let div = document.createElement('div')
// let nodeStr = "<img src='' alt='图片加载错误' title='图片' style='width:80px;height:80px;'><p>123</p></img>"
// new DOMParser().parseFromString(nodeStr,'text/html')
// div.innerHtml = nodeStr
// console.log('div',div)
// uploadCont.appendChild(div)
// console.log('uploadCont',uploadCont)
}
fileReader.readAsDataURL(file)
return formData
}
imgUploader.value = ''
}
function post(url,param,requestOptions={}) { //封装post方法
const request = {
header: {
'content-type': 'application/json'
},
method: 'POST',
body: param,
credentials: 'same-origin'
}
const requestSet = Object.assign(request,requestOptions)
return fetch(`http:\\localhost:8080${url}`,requestSet)
}
</script>
<style></style>
</html>
原生js实现图片文件上传
最新推荐文章于 2024-01-26 11:12:12 发布