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)站的支持!
- jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
- js實(shí)現(xiàn)點(diǎn)擊按鈕彈出上傳文件的窗口
- 真正好用的js驗(yàn)證上傳文件大小的簡(jiǎn)單方法
- js實(shí)現(xiàn)上傳文件添加和刪除文件選擇框
- JS控制FileUpload的上傳文件類(lèi)型實(shí)例代碼
- JS中使用FormData上傳文件、圖片的方法
- js獲取上傳文件的絕對(duì)路徑實(shí)現(xiàn)方法
- JavaScript判斷FileUpload控件上傳文件類(lèi)型
- JavaScript檢測(cè)上傳文件大小的方法
- JS實(shí)現(xiàn)瀏覽上傳文件的代碼
相關(guān)文章
JS解決Date對(duì)象在IOS中的“大坑” 以及時(shí)間格式兼容問(wèn)題
這篇文章主要介紹了JS解決Date對(duì)象在IOS中的“大坑” 以及時(shí)間格式兼容問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10JS回調(diào)函數(shù)基本定義與用法實(shí)例分析
這篇文章主要介紹了JS回調(diào)函數(shù)基本定義與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)基本概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法
這篇文章主要介紹了js仿土豆網(wǎng)帶縮略圖的焦點(diǎn)圖片切換效果實(shí)現(xiàn)方法,涉及javascript操作圖片特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02Raphael帶文本標(biāo)簽可拖動(dòng)的圖形實(shí)現(xiàn)代碼
Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實(shí)現(xiàn)一個(gè)可拖動(dòng)的矩形同時(shí)矩形上還得顯示標(biāo)簽,網(wǎng)上關(guān)于這方面的知識(shí)提的很是于是本人自不量力寫(xiě)了一下,感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-02-02js實(shí)現(xiàn)仿百度汽車(chē)頻道選擇汽車(chē)圖片展示實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿百度汽車(chē)頻道選擇汽車(chē)圖片展示,實(shí)例分析了javascript鼠標(biāo)事件操作css樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05Firefox和IE兼容性問(wèn)題及解決方法總結(jié)
IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法在本文做下總結(jié),感興趣的朋友可以參考下2013-10-10JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱字面常量,是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù),提供一個(gè)存取信息的容器。2009-07-07微信小程序商城項(xiàng)目之商品屬性分類(lèi)(4)
這篇文章主要為大家詳細(xì)介紹了微信小程序商城項(xiàng)目之商品屬性值聯(lián)動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04使用原生js封裝webapp滑動(dòng)效果(慣性滑動(dòng)、滑動(dòng)回彈)
這篇文章主要介紹了使用原生js封裝webapp滑動(dòng)效果,具有慣性滑動(dòng)、滑動(dòng)回彈功能,需要的朋友可以參考下2014-05-05