简单的前端上传图片代码
生活随笔
收集整理的這篇文章主要介紹了
简单的前端上传图片代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圖片上傳</title><style type="text/css">/*css*/#fileimg{width:200px;height:200px;border:1px solid #eee;}.Btn{width:100px;background: #4BCD61;border: 0px;}</style><script type="text/javascript">//JSfunction fileClick() {document.getElementById('file').click()}//觸發一個觸發瀏覽事件，沒有的話點擊button就不會出現選擇框了function upCh(file){let img = document.getElementById('fileimg')let formData = new FormData()let imgUrl = file.files[0];if (imgUrl){formData.append('file',imgUrl);imgUrl.src = window.URL.createObjectURL(imgUrl)//window.URL.createObjectURL預覽圖片/*這里可以寫上傳到后端代碼*/}
}</script></head>
<body>
<input type="file" id="file" name="" onchange="upCh(this)" />
<br />
<img id="fileimg" src="" />
<br />
<button class="Btn" onclick="fileClick()">上傳圖片</button>
</body>
</html>
此代碼可以復制粘貼看看運行效果，十分簡單
?
轉載于:https://www.cnblogs.com/ellen-mylife/p/10638704.html
總結
以上是生活随笔為你收集整理的简单的前端上传图片代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery版本升级问题汇总
- 下一篇： 纯前端表格控件SpreadJS V12.