首頁 > 開發者 > JavaScript
js實現拖拽上傳圖片功能，js拖拽上傳圖片
直接把本地圖片拉到你設定的圖片上傳成功後的位置，就ok了，具體代碼如下
<!doctype html><html><head><meta charset="utf-8"><title>標題</title><meta name="keywords" content=""><meta name="description" content=""><style> *{margin:0; padding:0; list-style:none;} #box{ width: 600px; height: 300px; background: #ccc; padding: 50px; }</style></head><body> <div id="box"></div> <script>var box=document.getElementById('box');box.ondragover=function (e){ e.preventDefault();}box.ondrop=function (e){ e.preventDefault(); // console.log(e.dataTransfer.files[0]); var f=e.dataTransfer.files[0];//擷取到第一個上傳的檔案對象 var fr=new FileReader();//執行個體FileReader對象 fr.readAsDataURL(f);//把上傳的檔案對象轉換成url fr.onload=function (e){ console.log(e); // var Url=e.target.result;//上傳檔案的URL var Url=this.result;//上傳檔案的URL box.innerHTML+='<img src="'+Url+'" alt="">'; }}</script></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
