JavaScript 实现拖拽文件进行ajax上传

今天药忘吃喽~ 2022-05-17 09:58 262阅读 0赞

预防以后需要，自己手写了一个拖拽文件上传，话不多，效果图

![70][]

# **html 部分：** #

<div id="div" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeDrop(event)" style="width: 400px;height: 300px;border: 1px solid black;"></div>

里面写了一些方法，没看懂？ 没关系，看完JS就明白了这些方法的作用是干嘛的了

# **JS部分:** #

<script>
    		var FormData = new FormData
    
    		//文件移入
    		function allowDrop(event) {
    		    event.preventDefault();  //阻止浏览器默认事件
    			event.target.style.border="3px dotted red"
    		}
    		//文件移除
    		function removeDrop(event){
    			event.preventDefault();
    			event.target.style.border="1px solid black"
    		}
    		//当鼠标松开文件
    		function drop(event) {
    		    event.preventDefault();  
    		    event.target.style.border="1px solid black"
    		    
    		   	var files = event.dataTransfer.files
    		   	if(files.length==0){	//没有文件返回false
    		   		return false
    		   	}
    		   	AddFiles(files)	 
    		}
    		
    		function AddFiles(files){	//添加文件，for循环掉多个文件 ，支持多文件添加,这里也可以做是否为图片文件判断
    			for(var i =0;i<files.length;i++){
    				FormData.append("file",files[i])
    				FileUpload(FormData)
    			}
    		}
    		
    		function FileUpload(FormData){	//最后将拿到的文件进行ajax上传，暂时没拿服务器测试，实际情况可能会有所出入
    			　$.ajax({		///这里用了jQuery的ajax封装方法，这里还没来得及封装自己的ajax  先用了jQuery的
    		            url:url,
    		            type:"post",
    		            data:FormData,
    		            processData:false,
    		            contentType:false,
    		            success:function(data){
    		            	
    		                }
    				});	
    		}
    		
    
    </script>

好啦 一个大致的拖拽文件上传的框架就搭好了，然后可以自由编写你你想要的各种效果；

不足地方请多指教

[70]: /images/20220517/fb263040aa6c404ea6d542d4d8a608b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，262人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5拖拽文件上传

上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类

淩亂°似流年/ 2023年01月01日 06:56/ 0 赞/ 212 阅读

相关 html5学习(文件拖拽上传)

> html5文件拖拽上传,有图有代码！文件拖拽的核心代码不多，如下可做参考： divNode.ondrop = function(e) { e.pre

淩亂°似流年/ 2022年12月31日 02:25/ 0 赞/ 191 阅读

相关 java 拖拽上传_Java swing怎么实现上传文件并支持拖拽上传

展开全部你这个复杂了，我稍微说说吧。进度条稍微简单点，你就去看看Oracle的tutorial就行了，记得运用科学(或3231313335323631343130323

深碍√TFBOYSˉ_/ 2022年11月02日 11:46/ 0 赞/ 447 阅读

相关 JavaScript实现拖拽上传解析 APK 信息

![aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzFjNGJiMTVjZjViNjNkMGI5YjQwNDA5N2

素颜马尾好姑娘i/ 2022年11月02日 06:03/ 0 赞/ 339 阅读

相关拖拽上传图片--文件

应用upload.js 拖拽上传开始 document.addEventListener("drop",function(e){ //拖离

港控/mmm°/ 2022年07月26日 11:20/ 0 赞/ 304 阅读

相关 ajax 文件拖拽上传

客户端服务器端客户端 <!DOCTYPE html> <html lang="en"> <head>

╰半夏微凉°/ 2022年07月19日 06:00/ 0 赞/ 307 阅读

相关 Bootstrap 实现文件的本地拖拽上传

代码： uploadfile.html <!DOCTYPE html> <html> <head> <title>文件上传</

落日映苍穹つ/ 2022年06月11日 01:58/ 0 赞/ 395 阅读

相关使用dropzone实现文件拖拽上传功能

![70][] ![70 1][] 前端代码，关于dropzone的配置我写在注释里了 <html> <head> <meta chars

川长思鸟来/ 2022年05月25日 09:10/ 0 赞/ 314 阅读

相关 JavaScript 实现拖拽文件进行ajax上传

预防以后需要，自己手写了一个拖拽文件上传，话不多，效果图 ![70][] html 部分： <div id="div" ondrop="drop(event)

今天药忘吃喽~/ 2022年05月17日 09:58/ 0 赞/ 263 阅读

相关 electron 拖拽上传文件

1、因为electron集成了node,故可以使用node的方式来对文件操作代码示例: //引入node模块 const fs=require('fs')

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:49/ 0 赞/ 1096 阅读