JS文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片
更新時間：2017年03月08日 16:02:00 作者：小結(jié)巴巴吧
這篇文章主要介紹了JS文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片,需要的朋友可以參考下
1.效果展示
2.html 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./upload.js"></script>
<style>
#drop img{width: 100px;height: 100px;margin: 10px;}
</style>
</head>
<body onload="test()">
<div id="drop" style="width: 500px;height: 400px;background: #eee;margin: 0 auto;">
<div style="clear: both;"></div>
</div>
<p style="text-align: center"><button onclick="up()">提交</button></p>
</body>
</html>
3.引入js
js地址 ：http://files.cnblogs.com/files/jiebba/upload.js
4.引用插件
var formData = new FormData(),list={}
function test() {
var d = new DragUpLoads()
d.getDragImage({id:'drop',dropCallback:function (data) {
if(list[data.name]) return;
list[data.name] = true
formData.append("files", data.blob);
formData.append("asdfas", 'asdfasdf');
document.getElementById('drop').appendChild(data.img)
/*
* 返回img對象，url ,blob對象
* */
}})
}
function up() {
console.log(formData)
/*
* formData 這個對象即我們要傳的值
* 通過 異步post/get 給后臺即可
* */
}
以上所述是小編給大家介紹的JS文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JS基于ES6新特性async await進行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進行異步處理操作,結(jié)合實例形式分析了async await進行異步處理操作的相關(guān)原理、步驟與注意事項,需要的朋友可以參考下2019-02-02
js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
這篇文章主要介紹了js實現(xiàn)操作cookie的常見方法,結(jié)合實例形式分析了js操作cookie創(chuàng)建、讀取、刪除相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2020-03-03
JavaScript Canvas實現(xiàn)井字棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas實現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02
sort方法在我們的日常開發(fā)中是經(jīng)常使用的，sort方法一般是用來對數(shù)組進行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來深入了解sort方法吧2023-05-05
JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易tab欄切換內(nèi)容欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
javascript實現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
本篇文章主要介紹了javascript實現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)，前端的視圖層和數(shù)據(jù)層有時需要實現(xiàn)雙向綁定，目前實現(xiàn)數(shù)據(jù)雙向綁定主要有三種，有興趣的可以了解一下。2017-03-03
一般JSON字符串轉(zhuǎn)換為JS對象，都使用var jsonStr="{a:1}";var jsonObj = eval("("+jsonStr+")");2013-05-05
這篇文章主要介紹了webpack常用配置總覽(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
下面小編就為大家?guī)硪黄∈新?lián)動效果的簡單實現(xiàn)代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06