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

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

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>

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

不足地方请多指教