オリジナルのことに関しては、少なくとも私は多くのことを忘れてしまいました、ただそれを記録してください。これは、H5でより一般的に使用される機能でもあります。
必要性/質問：ボタンをクリックし、画像を選択し、確認し、アップロードします
ナンセンスな話をするのではなく、コードにアクセスしてください
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<button id="subimg" onclick="ome()">来了老弟</button>
<input type="file" multiple id='getfile' onchange="add(this)" ></input>
<img src="./20201201111431.jpg" id="myimg" style="height: 250px;"/>
</body>
<script >
let myimg =document.getElementById('myimg')
let subimg =document.getElementById('subimg')
let getfile =document.getElementById('getfile')
function ome() {
getfile.click() //触发上传控件
}
function add(f) {
// console.log(f.files[0].type) //图片格式
// console.log(f.files[0].size) //图片大小做判断
// 解析预览
let reader = new FileReader()
reader.readAsDataURL(f.files[0])
reader.onload = function () {
// console.log( reader.result) //base64格式的图片
myimg.src=reader.result
}
//上传时候也是传的f.files[0]文件。
}
</script>
</html>
「Hereismybrother」をクリックしてファイル選択コントロールをトリガーします。画像が選択された場合にのみadd（）がトリガーされます。
真实项目中是不会修改“选择文件“控件的样式的，更不会留他在页面上。都是直接隐藏，用更好看的元素代替他
甌穴：
- onchangeイベントをラベルにバインドすることによってのみパラメーターを取得できます（これを記述する必要があります）。監視関数を記述した場合、このパラメータを取得することはできません
- 1024バイト= 1kb、1024kb = 1M。1024 1024 10 = 10M
- 複数選択が設定されているかどうかに関係なく、それはパラメータでなければなりません。files[0]
会社の実際の戦闘
