//上传单个/多个文件

<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. 64. 合并排序数组.md

    描述 合并两个排序的整数数组A和B变成一个新的数组. 你可以假设A具有足够的空间(A数组的大小大于或等于m+n)去添加B中的元素. 您在真实的面试中是否遇到过这个题? 样例 给出 A = [1, 2, ...

  2. BZOJ.4897.[Thu Summer Camp2016]成绩单(区间DP)

    BZOJ 显然是个区间DP.令\(f[l][r]\)表示全部消掉区间\([l,r]\)的最小花费. 因为是可以通过删掉若干子串来删子序列的,所以并不好直接转移.而花费只与最大最小值有关,所以再令\(g ...

  3. JavaScript基础笔记（三） 引用类型

    引用类型 引用类型的值(对象)是引用类型的一个实例. 一.Object类型 创建Object实例: //方法一:通过new操作符创建 var a = new Object(); a.neme = &q ...

  4. Android软件设计规范---命名规则/代码包设计规则等

    如果你将源码作为产品发布,就需要确认它是否被很好地打包并且清晰无误,一如你已构建的其他任何产品. 作为软件设计师,代码即是产品:不仅需要实现功能,还需有“优美.大方”的外表. 标识符命名法,标识符命名 ...

  5. 数据结构 BM算法

    BM算法是比KMP算法更快的字符串模式匹配算法.BM算法最好情况下的时间复杂度是O(n),KMP算法最好情况下的时间复杂度是O(n+m),两者最坏情况下的时间复杂度均是O(m*n).其中,n指目标串长 ...

  6. Java WebSocket HttpSession与WebSocket Session的关联

    当HttpSession中止(通过显示地失效或超时)时,Web容器会把HttpSession属性从HttpSession中清除. javax.servlet.http.HttpSessionBindi ...

  7. Hadoop2之NameNode HA详解

    在Hadoop1中NameNode存在一个单点故障问题,如果NameNode所在的机器发生故障,整个集群就将不可用(Hadoop1中虽然有个SecorndaryNameNode,但是它并不是NameN ...

  8. bootstrap常见的面试题

    1.  如果让一个元素在pc端显示而在手机端隐藏,下列选项正确的是(b). A. visible-xs-8  hidden-md B. visible-md-8 hidden-xs C. visibl ...

  9. JSAP103

    JSAP103 1.节点 1)定义:不是元素,节点是页面中的所有内容(标签,属性,文本),Node.它使得任何标签中的元素获取都十分方便 2)节点的相关属性 可以使用标签即元素点出来,可以使用属性节点 ...

  10. MUI学习04-开关按钮

    HTML代码如下: <div class="mui-switch"> <div class="mui-switch-handle">&l ...