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