js實(shí)現(xiàn)本地圖片文件拖拽效果
更新時(shí)間：2017年07月18日 15:08:40 作者：輸出是最好的學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)本地圖片文件拖拽效果，拖拽文件到指定位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
如何拖拽文件到指定位置，具體方法如下
在從本地上傳圖片的時(shí)候，如果使用拖拽效果，想想應(yīng)該是更加的高大上，下面直接上代碼
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dropBox{
width: 300px;
height: 300px;
border:1px solid red;
font-size: 40px;
text-align: center;
background: lightyellow;
background-repeat: no-repeat;
background-size: 100%;
}
#dropBox div{
margin:50px auto;
width: 140px;
}
</style>
</head>
<body>
<div id="dropBox">
<div>拖動(dòng)你的圖片到這里</div>
</div>
<script type="text/javascript">
var dropBox;
window.onload=function(){
dropBox = document.getElementById("dropBox");
// 鼠標(biāo)進(jìn)入放置區(qū)時(shí)
dropBox.ondragenter = ignoreDrag;
// 拖動(dòng)文件的鼠標(biāo)指針位置放置區(qū)之上時(shí)發(fā)生
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e){
// 確保其他元素不會(huì)取得該事件
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();
// 取得拖放進(jìn)來的文件
var data = e.dataTransfer;
var files = data.files;
// 將其傳給真正的處理文件的函數(shù)
var file = files[0];
var reader = new FileReader();
reader.onload=function(e){
dropBox.style.backgroundImage = "url('"+e.target.result+"')";
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05
使用PHP+JavaScript將HTML頁面轉(zhuǎn)換為圖片的實(shí)例分享
這篇文章主要介紹了使用PHP+JavaScript將HTML元素轉(zhuǎn)換為圖片的實(shí)例分享,文后結(jié)果的截圖只能體現(xiàn)出替換的字體,也不能說將靜態(tài)頁面轉(zhuǎn)為圖片可以加快加載,只是這種做法比較interesting XD需要的朋友可以參考下2016-04-04
bootstrap如何讓dropdown menu按鈕式下拉框長度一致
bootstrap框架提供了下拉菜單組件（dropdown），即點(diǎn)擊一個(gè)元素或按鈕，觸發(fā)隱藏的列表顯示出來。下面通過本文給大家介紹bootstrap如何讓dropdown menu按鈕式下拉框長度一致,需要的朋友可以參考下2017-04-04
javascript attachEvent和addEventListener使用方法
attachEvent與addEventListener區(qū)別 適應(yīng)的瀏覽器版本不同，同時(shí)在使用的過程中要注意2009-03-03
JS 實(shí)現(xiàn)雙色表格實(shí)現(xiàn)代碼
通過為<tr>元素添加屬性或類型選擇器，再通過CSS設(shè)置可以實(shí)現(xiàn)雙色表格，但如果表格很長，逐個(gè)元素添加可真麻煩。而且這樣的代碼維護(hù)起來不容易。所以比較好的方式是用JS實(shí)現(xiàn)。2009-11-11
JS控制頁面跳轉(zhuǎn)時(shí)未請(qǐng)求要跳轉(zhuǎn)的地址怎么回事
在js中通過window.location.href控制頁面跳轉(zhuǎn)時(shí)，有時(shí)會(huì)跳轉(zhuǎn)至緩存頁面，并沒有真正去請(qǐng)求要跳轉(zhuǎn)的地址，導(dǎo)致頁面數(shù)據(jù)未能及時(shí)加載刷新。怎么解決呢？下面小編給大家解答下2016-10-10
echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄
Echarts是由百度提供的數(shù)據(jù)可視化解決方案,下面這篇文章主要給大家介紹了關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無法正常顯示的問題解決記錄,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JavaScript實(shí)現(xiàn)單英文金山打字通
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單英文金山打字通，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家介紹了JSON常用解析框架使用操作詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺(tái)的編程語言。這篇文章主要介紹了TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-04-04