index.html
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<title></title> ???<style media="screen"> ???* {margin:0; padding:0; list-style: none} ???.box {width:400px; height:200px; background:#CCC; border:1px solid black; line-height:200px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; text-align:center; display:none;} ???.img_list {overflow:hidden;} ???.img_list li {float:left; width:200px; height:200px; border:3px solid #666; margin:10px; position:relative;} ???.img_list li img {width:100%; height:100%;} ???.img_list li .del_btn {position:absolute; right:0; top:0;} ???</style> ???<script> ???window.onload=function (){ ?????let oUl=document.querySelector(‘.img_list‘); ?????let oBox=document.querySelector(‘.box‘); ?????let timer; ?????document.addEventListener(‘dragover‘, (ev)=>{ ???????clearTimeout(timer); ???????oBox.style.display=‘block‘; ???????timer=setTimeout(function (){ ?????????oBox.style.display=‘none‘; ???????}, 300); ???????ev.preventDefault(); ?????}, false); ?????oBox.addEventListener(‘dragenter‘, ()=>{ ???????oBox.innerHTML=‘请松手‘; ?????}, false); ?????oBox.addEventListener(‘dragleave‘, ()=>{ ???????oBox.innerHTML=‘请把文件拖到这儿‘; ?????}, false); ?????oBox.addEventListener(‘drop‘, (ev)=>{ ???????Array.from(ev.dataTransfer.files).forEach(file=>{ ?????????if(!file.type.startsWith(‘image/‘)){ ???????????return; ?????????} ?????????let reader=new FileReader(); ?????????reader.onload=function (){ ???????????let oLi=document.createElement(‘li‘); ???????????oLi.file=file; ???????????oLi.innerHTML=‘<img src="a.png" ><a href="javascript:;" class="del_btn">删除</a>‘; ???????????let oImg=oLi.children[0]; ???????????oImg.src=this.result; ???????????let oBtnDel=oLi.children[1]; ???????????oBtnDel.onclick=function (){ ?????????????oUl.removeChild(oLi); ???????????}; ???????????oUl.appendChild(oLi); ?????????}; ?????????reader.readAsDataURL(file); ???????}); ???????ev.preventDefault(); ?????}, false); ?????//真的上传 ?????let oBtnUpload=document.querySelector(‘#btn_upload‘); ?????oBtnUpload.onclick=function (){ ???????let data=new FormData(); ???????Array.from(oUl.children).forEach(li=>{ ?????????data.append(‘f1‘, li.file); ???????}); ???????// ???????let oAjax=new XMLHttpRequest(); ???????//POST ???????oAjax.open(‘POST‘, `http://localhost:8080/api`, true); ???????oAjax.send(data); ???????oAjax.onreadystatechange=function (){ ?????????if(oAjax.readyState==4){ ???????????if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){ ?????????????alert(‘成功‘); ???????????}else{ ?????????????alert(‘失败‘); ???????????} ?????????} ???????}; ?????}; ???}; ???</script> ?</head> ?<body> ???<ul class="img_list"> ?????<!--<li> ???????<img src="a.png" > ???????<a href="javascript:;" class="del_btn">删除</a> ?????</li> ?????<li> ???????<img src="b.png" > ???????<a href="javascript:;" class="del_btn">删除</a> ?????</li>--> ???</ul> ???<input type="button" name="" value="上传" id="btn_upload"> ???<div class="box"> ?????请把文件拖到这儿 ???</div> ?</body></html>ajax2.0之拖拽上传
原文地址：https://www.cnblogs.com/hss-blog/p/9770483.html