您好,登錄后才能下訂單哦!
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" > <div ></div> </div> <p ><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文件/圖片從電腦里面拖拽到瀏覽器上傳文件/圖片,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。