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>

ajax2.0之拖拽上传的更多相关文章

  1. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  2. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  3. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  4. h5图片上传预览与拖拽上传

    图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  6. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  7. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  8. 原生API实现拖拽上传文件实践

    功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...

  9. Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

随机推荐

  1. seo搜索优化技巧02-seo问答推广怎么做?

    问答推广就是以用户的​‌‌角度去提问,这些问题内容就是用户搜索想要知道的.简单来说通过第三方平台站在用户的角度去帮助客户解答问题,同时附带自身的品牌和产品信息就是问答推广. 常见的问答平台有百度知道. ...

  2. drf分页功能

    什么是restful规范 是一套规则,用于程序之间进行数据交换的约定. 他规定了一些协议,对我们感受最直接的的是,以前写增删改查需要写4个接口,restful规范的就是1 个接口,根据method的不 ...

  3. 题解 NOI1999【生日蛋糕】—— 洛谷

    自己想出这题的大佬蒟蒻在这儿%您了 我实在是太弱了,搜索这种辣鸡算法都不会(逃 这题真的是想了好久,每次都会T三个点,我以为我的剪枝已经堆了够多了,结果后来才知道是一个关键剪枝没想到OTZ 先贴代码 ...

  4. npm 安装 electron 出现的奇葩错误

    起因 使用yarn安装electron有时稳定,在搭配别的框架时有时又出现无解的错误了,于是打开electron官网,发现: emm,似乎官方对npm情有独钟.于是我遵从官方旨意使用npm安装elec ...

  5. 如何查看子线程中的GC Alloc

    1)如何查看子线程中的GC Alloc2)Build时,提示安卓NDK异常3)如何获得ParticleSystem产生的三角形数量4)关于图片通道的问题5)GPUSkinning导致模型动画不平滑 M ...

  6. 龙生九子-浅谈Java的继承

    龙生九子-浅谈Java的继承 书接上回,我们之前谈过了类和对象的概念,今天我来讲一讲面向对象程序设计的另外一个基本概念-继承 目录 为什么需要继承 自动转型与强制转型 继承能干啥 复写和隐藏 supe ...

  7. SSM整合搭建(二)

    本页来衔接上一页继续来搭建SSM,再提一下大家如果不详细可以再去看视频哦,B站就有 之后我们来配置SpringMVC的配置文件,主要是配置跳转的逻辑 先扫描所有的业务逻辑组件 我们要用SpringMV ...

  8. 15. 获取类路径下文件对应的输入流（inputStream）方式

    //获取 inputStream 方式一Resource resource = new ClassPathResource("excel/template/test.xlsx"); ...

  9. wpf xaml CS0426 错误原因

    wpf  程序集中 类命名空间名称和类名不能相同,否则在 xaml生成 i.g.cs时,会导致 自动生成代码无法推到处是类型还是命名空间的问题.   触发这个错误的条件是类命名空间 与 类名相同 并 ...

  10. PTEST 渗透测试标准

    1:前期交互阶段 在前期交互(Pre-Engagement Interaction)阶段,渗透测试团队与客户组织进行交互讨论,最重要的是确定渗透测试的范围.目标.限制条件以及服务合同细节.该阶段通常涉 ...