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代碼實現(xiàn)隨機漂浮圖片廣告
在網(wǎng)上有很多這樣的代碼，不過未必符合W3C標準，因為在頭部加上<!DOCTYPE html>類似標簽之后，漂浮效果就會失效，下面分享一個符合標準的漂浮代碼，使需要的朋友免去大量改造代碼的繁瑣2016-01-01
單擊事件，將Td內(nèi)容更新為一個Div，其中裝載了一個Text，用于用戶輸入新的Td的值，一個確定按鈕，一個取消按鈕，用于保存或取消用戶的輸入內(nèi)容2013-01-01
用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)
這篇文章主要介紹了用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)的具體實現(xiàn),需要的朋友可以參考下2014-08-08
這篇文章主要為大家介紹了JS面試之對事件循環(huán)的理解分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript操作XML 使用百度RSS作為新聞源示例
JavaScript操作XML 使用百度RSS作為新聞源示例,需要的朋友可以參考下2012-02-02
下面小編就為大家?guī)硪黄狫avaScript 控制字體大小設置的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
js中的string.format函數(shù)代碼，學習js的朋友可以參考下。2011-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)窗口全屏示例，包含全屏事件、退出全屏事件等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
打印頁面設置,打印頁面預覽在打印過程中經(jīng)常會遇到，網(wǎng)上搜集整理了一些實用的打印方法與大家分享，感興趣的朋友可以了解下哈2013-03-03
這篇文章主要介紹了基于JavaScript實現(xiàn)熔巖燈效果導航菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01