直接把本地圖片拉到你設定的圖片上傳成功后的位置,就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>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答