//上传单个/多个文件

<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. BZOJ.4320.[ShangHai2006]Homework(根号分治 分块)

    BZOJ \(\mathbb{mod}\)一个数\(y\)的最小值,可以考虑枚举剩余系,也就是枚举区间\([0,y),[y,2y),[2y,3y)...\)中的最小值(求后缀最小值也一样)更新答案,复 ...

  2. 蓝桥杯 ——无重复组合——C++

    问题描述: 求任意长度的(ABCD.....)全部n=0,1,2 ....组合情况(n小于等于串的长度) 解决思路: 如果串的长度固定,n的值固定循环嵌套 在这里以深度优先形成一棵树,如下图: 源代码 ...

  3. git 命令的使用

    hello git 穿越时空 修改一条数据 git status 查看是否修改 git diff file1 如何修改的 git add file1 git commit -m "提交的信息 ...

  4. BZOJ2130 : 魔塔

    考虑从$0$到$n$枚举$A$的通关楼层. 设$f[i]$表示$B$通关$i$层时$C$最多能得到多少金币,因为金币数非负,所以也可以看作最多通关多少层. 当$A$的通关楼层往上多$1$的时候,这把钥 ...

  5. JavaScript 对象拷贝研究

    介绍一下JavaScript里面的一些对象拷贝的方法 浅拷贝 深拷贝 利用序列化进行对象拷贝

  6. PAT-Top1001. Battle Over Cities - Hard Version (35)

    在敌人占领之前由城市和公路构成的图是连通图.在敌人占领某个城市之后所有通往这个城市的公路就会被破坏,接下来可能需要修复一些其他被毁坏的公路使得剩下的城市能够互通.修复的代价越大,意味着这个城市越重要. ...

  7. vue环境配置 vue-cli脚手架

    vue 环境配置步骤: 第一步: 在官网下载node,Node  下载地址 http://nodejs.cn/ 并安装node.检测node是否安装成功, 按 “windows+r”  进入cmd命令 ...

  8. JavaScript关于函数对象的一些学习总结

    1.概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

  9. Vue（二十三）vuex + axios + 缓存 运用 （以登陆功能为例）

    (一)axios 封装 (1)axios拦截器 可以在axios中加入加载的代码... (2)封装请求 后期每个请求接口都可以写在这个里面... (二)vuex user.js import { lo ...

  10. JAVA自学笔记06

    JAVA自学笔记06 1.二维数组 1)格式: ①数据类型[][]数组名 = new 数据类型[m][n]; 或 数据类型[]数组名[]=new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...