ajax2.0之拖拽上传


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" alt=""><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" alt="">
        <a href="javascript:;" class="del_btn">删除</a>
      </li>
      <li>
        <img src="b.png" alt="">
        <a href="javascript:;" class="del_btn">删除</a>
      </li>-->
    </ul>
    <input type="button" name="" value="上传" id="btn_upload">
    <div class="box">
      请把文件拖到这儿
    </div>
  </body>
</html>

优质内容筛选与推荐>>
1、SQL2000里的数据类型
2、UML建模之用例图关系
3、点云ICP注册
4、algs4 使用 DrJava 编写 Hello World on Windows
5、OpenCV中的SVM参数优化


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号