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è)上傳的文件對象
var fr=new FileReader();//實(shí)例FileReader對象
fr.readAsDataURL(f);//把上傳的文件對象轉(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文對JavaScript中對象的本質(zhì)、對象與類的關(guān)系、對象與引用類型的關(guān)系;對象屬性如何進(jìn)行分類;屬性中特性進(jìn)行介紹。感興趣的朋友可以看下2016-12-12
JS實(shí)現(xiàn)微信"炸屎"大作戰(zhàn)功能
這篇文章主要介紹了JS實(shí)現(xiàn)微信 "炸屎"大作戰(zhàn),本文通過實(shí)例代碼圖文展示給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
TabBar 紅點(diǎn)提醒,很多小程序都需要這個(gè)功能比如聊天小程序,電商小程序等,這時(shí)候我們需要進(jìn)行自定義 TabBar,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的，但由于外部腳本的特殊性例如通過腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁面輸出HTML等。2011-04-04
這篇文章主要介紹了如何threejs利用indexeddb緩存加載glb模型問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了微信小程序之發(fā)送短信倒計(jì)時(shí)功能,需要的朋友可以參考下2017-08-08
本文給大家講述的是個(gè)人在一個(gè)項(xiàng)目中遇到的關(guān)于jsonp的post跨域問題的解決過程，這里記錄下來，分項(xiàng)給大家。2015-07-07
實(shí)例詳解ECMAScript5中新增的Array方法
這篇文章主要介紹了實(shí)例詳解ECMAScript5中新增的Array方法的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript實(shí)現(xiàn)文本中間縮略的兩種方案
項(xiàng)目中經(jīng)常會遇到縮略展示文字的場景,即要求文字在一行不換行展示,超出自動展示...,常用的展示效果有兩種,文字中間縮略以及文字末尾縮略,本文將通過代碼示例給大家詳細(xì)的講一下這兩種方案,需要的朋友可以參考下2024-06-06
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果...2007-03-03