EfonMark

一番码客 : 挖掘你关心的亮点。
http://www.efonmark.com

本文目录:

[TOC]

image-20200112082453756

思路分析

  1. 选用<input type="file">原生组件,实现该组件美化。
  2. 选用<img src="file">实现图片预览。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>图片预览</title>
<script src="js/test.js">
function upload(file) {
console.log(file)
let img = document.getElementById('img')
let formData = new FormData()
let temp = file.files[0]
console.log(temp)
if (temp){
formData.append('file',temp)
img.src = window.URL.createObjectURL(temp)
}
}
</script>
<style type="text/css">
.myBtn{
padding: 5px 10px;
background: rgb(92,184,92);
color: white;
outline: none;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>

<body>
<input type="file" style="display: none;" id="file" onchange="upload(this)" />
<button class="myBtn" onclick="fileBtn()">上传文件</button>
<br />
<img src="" id="img" style="width: 50%">
</body>

</html>

效果展示

image-20200112083136137

一番雾语:JavaScript上传图片并预览。


免费知识星球:一番码客-积累交流
微信公众号:一番码客
微信:Efon-fighting
网站:http://www.efonmark.com