[AJAX] 文件上传
2019-03-12 本文已影响0人
爱上落入尘世间的你
利用ajax异步上传文件, HTML代码如下所示
带有图片的预览功能, 即如果发现用户选择的文件是图片, 会插入预览以便用户确认自己上传的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file upload</title>
</head>
<body>
<form id="file_form" method="post" enctype="multipart/form-data">
<input type="file" id="file_input" name="file" oninput="update_preview()" multiple>
</form>
<div id="file_preview"></div>
<button onclick="upload()">上传</button>
<script>
function update_preview()
{
const file_input = document.getElementById('file_input')
const filesArr = file_input.files
const file_preview = document.getElementById('file_preview')
file_preview.innerHTML = ''
for (let i = 0; i < filesArr.length; i ++)
{
const file = filesArr[i]
console.log(file.type)
if (! file.type.match('image.*')) continue
const reader = new FileReader()
reader.addEventListener('load', function()
{
const img = new Image()
img.alt = file.name
img.src = reader.result
img.width = 100
img.style.margin = '20px'
file_preview.appendChild(img)
})
reader.readAsDataURL(file)
}
}
function upload()
{
const file_form = document.getElementById('file_form')
const file_input = document.getElementById('file_input')
const filesArr = file_input.files
if (filesArr.length === 0)
{
alert('请选择要上传的文件')
}
else
{
const formData = new FormData(file_form)
console.log(formData)
const xhr = new XMLHttpRequest()
const url = '//localhost:10000/file_upload'
xhr.open('POST', url)
xhr.responseType = 'json'
xhr.onload = function()
{
const res = xhr.response
if (res.ok)
{
alert('上传成功')
file_form.reset()
}
else
{
alert('上传失败')
}
}
xhr.send(formData)
}
}
</script>
</body>
</html>
