ajax拖拽预览
1 | < div id="div1"></ div > |
CSS
1 2 3 4 5 | div{ width : 300px ; height : 300px ; border : 5px solid black ; } |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | /* draggable="true" 代表可以拖拽。 ondragenter 拖入元素时触发。 ondragover 拖拽在该元素上移动时触发。 ondragleave 拖出元素时触发。 ondrop 拖拽元素松开的时候。 */ var div1 = document.getElementById( 'div1' ); div1.ondragenter = function (){ console.log( '拖入元素' ); return false ; }; div1.ondragover = function (){ console.log( '拖入移动元素' ); return false ; }; div1.ondragleave = function (){ console.log( '离开' ); }; div1.ondrop = function (ev){ console.log( '松开' ); //console.log(ev.dataTransfer.files); var files = ev.dataTransfer.files; for ( var i=0;i<files.length;i++){ var fr = new FileReader(); if (files[i].type.indexOf( 'image' )!=-1){ //做图片操作; fr.onload = function (){ var img = new Image(); img.src = this .result; document.body.appendChild(img); }; fr.readAsDataURL(files[i]); } else if (files[i].type.indexOf( 'text' )!=-1){ //打印文本 fr.onload = function (){ console.log( this .result); }; fr.readAsText(files[i], 'UTF-8' ); } var fd = new FormData(); fd.append( 'file' ,files[i]); // var xhr = new XMLHttpRequest(); xhr.open( 'post' , 'getList.php' , true ); xhr.send(fd); } return false ; }; |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥