快捷導(dǎo)航

JS文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片

更新時(shí)間：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對(duì)象，url ,blob對(duì)象
       * */
     }})
   }
   function up() {
     console.log(formData)
    /*
    * formData 這個(gè)對(duì)象即我們要傳的值
    * 通過(guò) 異步post/get 給后臺(tái)即可
    * */
   }

以上所述是小編給大家介紹的JS文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS基于ES6新特性async await進(jìn)行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進(jìn)行異步處理操作,結(jié)合實(shí)例形式分析了async await進(jìn)行異步處理操作的相關(guān)原理、步驟與注意事項(xiàng),需要的朋友可以參考下
2019-02-02
js實(shí)現(xiàn)操作cookie的常見(jiàn)方法總結(jié)【創(chuàng)建、讀取、刪除】
這篇文章主要介紹了js實(shí)現(xiàn)操作cookie的常見(jiàn)方法,結(jié)合實(shí)例形式分析了js操作cookie創(chuàng)建、讀取、刪除相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JavaScript Canvas實(shí)現(xiàn)井字棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas實(shí)現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下
2018-02-02
千萬(wàn)別錯(cuò)過(guò)的JavaScript?sort方法使用指南
sort方法在我們的日常開(kāi)發(fā)中是經(jīng)常使用的，sort方法一般是用來(lái)對(duì)數(shù)組進(jìn)行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來(lái)深入了解sort方法吧
2023-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換內(nèi)容欄
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換內(nèi)容欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)
本篇文章主要介紹了javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的三種方式小結(jié)，前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定，目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有三種，有興趣的可以了解一下。
2017-03-03
Json字符串轉(zhuǎn)換為JS對(duì)象的高效方法實(shí)例
一般JSON字符串轉(zhuǎn)換為JS對(duì)象，都使用var jsonStr="{a:1}";var jsonObj = eval("("+jsonStr+")");
2013-05-05
webpack常用配置總覽(小結(jié))
這篇文章主要介紹了webpack常用配置總覽(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)?lái)一篇省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06