JavaScript上传文件
<h3 id="效果">效果</h3><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f1dbd5f720f4881aaaa337427e05f57~tplv-k3u1fbpfcp-watermark.image?" alt="screenshots.gif" loading="lazy"></p>
<h3 id="实现">实现</h3>
<ul>
<li>无论是上传文件还是上传图片，用的都是<code>input</code>标签的<code>type="file"</code>；</li>
<li><code>input</code>标签触发<code>onChange</code>事件时，会接受<code>input</code>元素本身作为参数，元素对象的<code>files</code>属性，值是<code>fileList</code>(即文件列表，列表中是一个个文件对象，文件对象包括文件的名称，大小等)；</li>
<li>有了文件列表之后，需要创建一个<code>FileReader对象</code>,对象的<code>readerAsDataURL()</code>方法可以将上传的图片转为<code>base64</code>，然后存入到图片路径，这样就可以上传任意位置的路径;</li>
<li>图片的预览要注意文件的读取是异步的，所以要给<code>FileReader</code>对象一个读取完成的方法,使用<code>readAsDataURL</code>会返回一个<code>url</code>,这个值就保存在事件对象的<code>result</code>里,<code>img</code>通过加载这个地址,完成图片的加载;</li>
</ul>
<h3 id="代码">代码</h3>
<pre><code class="language-js"><!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>Document</title>
</head>
<style>
.container {
width: 500px;
height: 800px;
}
.img-container {
width: 300px;
height: 300px;
position: relative;
}
.file-container {
margin-top: 20px;
width: 300px;
height: 100px;
border: 1px solid #d88080;
}
.show {
width: 300px;
height: 300px;
border: 1px solid rgb(71, 219, 128);
}
.upload {
width: 300px;
height: 300px;
border: 1px solid rgb(216, 120, 120);
position: absolute;
top: 0;
left: 0;
}
.upload .icon {
font-size: 40px;
color: blue;
margin-top: 100px;
height: 50px;
cursor: pointer;
text-align: center;
}
.upload .text {
width: 300px;
height: 50px;
font-size: 16px;
text-align: center;
}
.upload .img-input {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
</style>
<body>
<div class="container">
<div class="img-container">
<div class="show"></div>
<div class="upload">
<div class="icon">+</div>
<div class="text">请选择图片</div>
<input class="img-input" type="file" onchange="uploadImg(this)" />
</div>
</div>
<div class="file-container">
<p>请上传文件</p>
<input class="file-input" type="file" onchange="uploadFile(this)" />
</div>
</div>
</body>
<script type="text/javascript">
uploadImg = function (file) {
console.log(file.files);
let reader = new FileReader()
reader.readAsDataURL(file.files)
reader.onloadend = function (e) {
console.log("e.target.result", e.target.result);
let base64 = e.target.result.split(',')
getBase64(base64)
console.log("base64", base64);
//接下来是发送ajax请求，就不演示了，在上传成功（即请求结果成功）后，回显图片，调用createImg(res)函数，参数是res
}
}
function createImg(imgSrc) {
let imgEle = document.createElement('img')
imgEle.src = imgSrc
document.querySelector('.upload').appendChild(imgEle)
}
function getBase64(base64) {
let base64Res = 'data:image/jpg;base64,' + base64.replace(/[\r\n]/g)
console.log("base64Res ", base64Res); // === e.target.result
let imgEle = document.createElement('img')
imgEle.style.width = '300px'
imgEle.style.height = '300px'
imgEle.style.position = 'absolute'
imgEle.style.top = 0
imgEle.style.left = 0
imgEle.src = base64Res
document.querySelector('.upload').appendChild(imgEle)
}
uploadFile = function (file) {
let reader = new FileReader()
reader.readAsText(file.files)
console.log(reader);
reader.onload = () => {
let res = JSON.parse(decodeURIComponent(reader.result))
console.log(res); //不带""
console.log(reader.result); //带""
}
}
</script>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/rain111/p/17462594.html
頁:
[1]