js實(shí)現(xiàn)拖拽上傳圖片功能
更新時(shí)間:2017年08月01日 09:24:17 作者:賽賽大人
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽上傳圖片功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
直接把本地圖片拉到你設(shè)定的圖片上傳成功后的位置,就ok了,具體代碼如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>標(biāo)題</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];//獲取到第一個(gè)上傳的文件對(duì)象 var fr=new FileReader();//實(shí)例FileReader對(duì)象 fr.readAsDataURL(f);//把上傳的文件對(duì)象轉(zhuǎn)換成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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
- 原生JS實(shí)現(xiàn)拖拽圖片效果
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- JS HTML5拖拽上傳圖片預(yù)覽
- js實(shí)現(xiàn)圖片放大和拖拽特效代碼分享
- JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a
- js css3實(shí)現(xiàn)圖片拖拽效果
- javascript 網(wǎng)頁(yè)編輯框及拖拽圖片的問(wèn)題
- JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法
- 原生JS實(shí)現(xiàn)拖拽照片墻
相關(guān)文章
基于JavaScript代碼實(shí)現(xiàn)隨機(jī)漂浮圖片廣告
在網(wǎng)上有很多這樣的代碼,不過(guò)未必符合W3C標(biāo)準(zhǔn),因?yàn)樵陬^部加上<!DOCTYPE html>類似標(biāo)簽之后,漂浮效果就會(huì)失效,下面分享一個(gè)符合標(biāo)準(zhǔn)的漂浮代碼,使需要的朋友免去大量改造代碼的繁瑣2016-01-01用javascript讀取xml文件讀取節(jié)點(diǎn)數(shù)據(jù)
這篇文章主要介紹了用javascript讀取xml文件讀取節(jié)點(diǎn)數(shù)據(jù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-08-08JavaScript操作XML 使用百度RSS作為新聞源示例
JavaScript操作XML 使用百度RSS作為新聞源示例,需要的朋友可以參考下2012-02-02javascript打印大全(打印頁(yè)面設(shè)置/打印預(yù)覽代碼)
打印頁(yè)面設(shè)置,打印頁(yè)面預(yù)覽在打印過(guò)程中經(jīng)常會(huì)遇到,網(wǎng)上搜集整理了一些實(shí)用的打印方法與大家分享,感興趣的朋友可以了解下哈2013-03-03基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01