//上传单个/多个文件

<input title="点击选择文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;">

//上传文件夹

<input title="点击选择文件夹" id="h5Input2" multiple="" webkitdirectory="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;">

  <!DOCTYPE html>

  <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>uploadFile</title>

    <script src="http://lib04.xesimg.com/lib/jQuery/1.11.1/jquery.min.js?1514549590"></script>

    <style type="text/css">

      .upload-default {

         border: 1px dashed red;

      }

      .upload-default.upload_drag_hover{

         border: 1px dashed green;

      }

      input{

        appearance: textfield;

        -moz-appearance: textfield;

        -webkit-appearance: textfield;

      }

      input[type="number"]::-webkit-inner-spin-button {

        -webkit-appearance: none;

      }

      input[type="number"]::-webkit-outer-spin-button {

        -webkit-appearance: none;

      }

    </style>

    </head>

    <body>

      <input type="number" min="1" max="10000" step="1">

      <input title="点击选择多个文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader">

      <input title="点击选择文件夹" id="h5Input2" multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="html5uploader" >

      <input title="点击选择单个文件" id="h5Input3"  accept="*/*" type="file" name="file" webkitRelativePath>

      <div id="fileDragArea" style="float: left;width: 300px;height: 300px;" class="upload-default">或者将图片拖到此处</div>

    </body>

  </html>

  <script type="text/javascript">

    window.onload = function (){

      document.getElementById('h5Input2').addEventListener('change', function (ev) {

         console.log(ev)

         //预览，主要是文件转换为base64，或者blob，或者canvas

         //file -> base64

        // file为前面获得的

        console.log(document.getElementById('h5Input2').files[0])

        var file = ev.target.files[0]

        var reader = new FileReader();

        reader.onload = function(e) {

          var img = new Image;

          img.src = this.result;  // this.result 为base64

          //console.log(this.result)

          // 加到dom

        };

        reader.readAsDataURL(file);

        //file -> blob

        // file为前面获得的

        var url = window.URL.createObjectURL(file);

        var img = new Image;

        img.src = url;

        //console.log(img)

        // 加到dom

        console.log(file)

        // 上传 需要用到FormData模拟表单数据 或直接form上传

        // var formData = new FormData();

        // formData.append('resourceId', '');

        // // formData.append('file', '');

        // // formData.append('filename', file)

        // formData.append("file", file);

        // var xhr = new XMLHttpRequest();

        // //上传文件进度条

        // xhr.upload.addEventListener("progress", function(e){

        //   console.log('9999')

        //   if (e.total > 0) {

        //     console.log('----进度-----')

        //     console.log(e.loaded, e.total)

        //       e.percent = Math.round(e.loaded / e.total * 100);

        //       console.log( e.percent)

        //       console.log('----进度-----')

        //   }

        // }, false);

        // var url = 'http://courseware.xesv5.com/api/OnlineEdit/upload'

        // xhr.open('post', url, true);

        // xhr.onload = function () {

        //   console.log(4566666)

        // }

        // xhr.send(formData);

      /*********************************************尝试分片，创建多个上传的xhr对象****************************************/

      var bytesPerPiece = 1024 * 1024; // 每个文件切片大小定为1MB

      var totalPieces;

      var blob = file;

      var start = 0;

      var end;

      var index = 0;

      var filesize = blob.size;

      var filename = blob.name;

      //计算文件切片总数

      totalPieces = Math.ceil(filesize / bytesPerPiece);

      while(start < filesize) {

        //判断是否是最后一片文件，如果是最后一篇就说明整个文件已经上传完成

        if (index == totalPieces) {

          console.log('整个文件上传完成');

          return false;

        }

          end = start + bytesPerPiece;

          if(end > filesize) {

              end = filesize;

          }

          var chunk = blob.slice(start,end);//切割文件

          var sliceIndex = index;

          var formData = new FormData();

          formData.append("file", chunk, filename);

          formData.append("total", totalPieces);  //总片数

          formData.append("index", sliceIndex);   //当前是第几片

          var xhr = new XMLHttpRequest();

          //上传文件进度条

          xhr.upload.addEventListener("progress", function(e){

            if (e.total > 0) {

              console.log('----进度-----')

              //e.percent = Math.round(e.loaded / e.total * 100);

              //(e.loaded当前片文件上传的上传的进度 start是前面分片已经上传完成的文件大小

               e.percent = 100*(e.loaded+start)/file.size;

               if(e.pecent > 100){

                e.percent = 100;

               }

              console.log( e.percent)

              console.log('----进度-----')

            }

          }, false);

          var url = 'http://courseware.xesv5.com/api/OnlineEdit/upload'

          xhr.open('post', url, true);

          console.log(5)

          xhr.onload = function () {

            console.log(45)

          }

          xhr.send(formData);

          start = end;

          index++;

      }

      /*********************************************尝试分片****************************************/

      })

    }

    var dragDrop = document.getElementById('fileDragArea');

    //拖拽上传文件

    dragDrop.addEventListener("dragover", function(e) {

      e.stopPropagation();

      //必须阻止默认事件

      e.preventDefault();

      $(this).addClass("upload_drag_hover");

     }, false);

    dragDrop.addEventListener("dragleave", function(e) {

      e.stopPropagation();

      e.preventDefault();

      $(this).removeClass("upload_drag_hover");

    }, false);

    dragDrop.addEventListener("drop", function(e) {

      e.stopPropagation();

      e.preventDefault();

      //取消鼠标经过样式

      $(this).removeClass("upload_drag_hover");

      //获取文件列表对象和文件相对路径

      var files = e.target.files || e.dataTransfer.files;

      var dragDrop = document.getElementById('fileDragArea')

      var items = e.dataTransfer.items

      console.log(items.length)

      for (var i = 0; i < items.length; i++) {

          var item = items[i].webkitGetAsEntry();

          console.log(item)

          if (item) {

            //判断是否为文件夹

            if (item.isDirectory) {

                traverseFileTree(item)

            } else {

                //  this.$alert('只支持上传文件夹', '提示', {

                //      confirmButtonText: '确定'

                // })

            }

          }

      }

     }, false);

    function traverseFileTree (item, path) {

        path = path || ''

        if (item.isFile) {

            // Get file

            item.file((file) => {

                let obj = {

                    file: file,

                    path: path + file.name

                }

            })

        } else if (item.isDirectory) {

            // Get folder contents

            var dirReader = item.createReader()

            readDir (dirReader, item, path)

        }

    }

    function readDir (dirReader, item, path) {

      dirReader.readEntries((entries) => {

        console.log(entries.length)

        if (entries.length) {

          let obj = {

              name: item.name,

              process: 0,

              total: entries.length

           }

          for (let i = 0; i < entries.length; i++) {

              console.log(entries[i])

              traverseFileTree(entries[i], path + item.name + '/')

          }

          // entries长度不为0，继续调用解析，直至长度为0。因为chrome浏览器只支持一次解析100个

          readDir(dirReader, item, path)

        }

      },function (e) {

         console.log(e)

      })

    }

    dragDrop.addEventListener("dragend", function(e) {

      console.log(9999999999999999999999)

      console.log(e)

    })

  </script>

　　

input文件上传（上传单个文件/多选文件/文件夹、拖拽上传、分片上传）的更多相关文章

  1. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

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

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

  3. asp.net 文件分片上传

    最近在研究文件上传,里面的门道还是挺多的,网上大多数文章比较杂乱,代码都是片段,对于新手小白来说难度较高,所以在此详细写一下今天看到的一个demo,关于文件分片上传的. <!DOCTYPE ht ...

  4. PHP大文件分片上传的实现方法

    一.前言 在网站开发中,经常会有上传文件的需求,有的文件size太大直接上传,经常会导致上传过程中耗时太久,大量占用带宽资源,因此有了分片上传. 分片上传主要是前端将一个较大的文件分成等分的几片,标识 ...

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

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

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

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

  7. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  8. Silverlight中的拖拽实现的图片上传

    原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...

  9. Unity输出PC端（Windows） 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

随机推荐

  1. Jenkins部署码云SpringBoot项目到远程服务器

    本文是上一篇文章的后续,上一篇只是利用Jenkins部署项目到本地,并启动,本文是将项目部署到远程服务器并执行. 1.环境准备 1.1 安装插件 上一篇文章已经介绍了需要安装的应用及插件,这一篇还需要 ...

  2. 数据仓库分层ODS DW DM 主题 标签

    数据仓库知识之ODS/DW/DM - xingchaojun的专栏 - CSDN博客 数据仓库为什么要分层 - 晨柳溪 - 博客园 数据仓库的架构与设计 - Trigl的博客 - CSDN博客 数据仓 ...

  3. C#选择文件、选择文件夹、打开文件

    1.选择文件用OpenDialog OpenFileDialog dialog = new OpenFileDialog(); dialog.Multiselect = true;//该值确定是否可以 ...

  4. easyui中对数据的判断来显示，formatter控制

    需求效果图:(把编辑按钮根据信息是否发布,来选择显示与不显示,已发布的不能够进行编辑所以不显示) 上图中的flag为发布标识,flag值1为已发布,值2为未发布 思路:第一想到的是给这个button按 ...

  5. setState()之后使用state的问题

    一开始知道setState()是异步执行方法,在使用这个方法改变state之后直接用this.state获取的state不是更新之后的,只有render发生变化的时候才触发this.setState( ...

  6. C++程序设计方法4:模板特化

    模板参数的具体化/特殊化 有时,有些类型不适用,则需要对模板进行特殊化处理,这称为“模板特化” 对函数模板,如果有多个模板参数,则特化时必须提供所有参数的特例类型,不能部分特化: 如: char *s ...

  7. css3中linear-gradient()的使用

    用线性渐变创建图像. 如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现. 示例代码: linear-gradient(#fff, #333); linear ...

  8. Vue.JS React 精彩文章汇总

    JavaScript深入系列  [干货] JavaScript数组所有API全解密  [干货] 移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 [扫盲] Jonath ...

  9. AlexNet总结

    https://blog.csdn.net/Rasin_Wu/article/details/80017920 https://blog.csdn.net/chaipp0607/article/det ...

  10. Office365 OneDrive Geo Move

    Issue Description: 1. Connect to SPO Service. 2. Validate SPO Service OneDrive Geo move compatibilit ...