//上传单个/多个文件

<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. UVA 232 Corssword Answer

    题意:输入m*n大小的字符串(里面有*,*为黑格,其他为白格),然后对它编号,编号规则为从左到右,从上往下,且左边或上面没有白格(可能是黑格或越界),如下图: 注意: ①除第一次输出答案外,其余每次输 ...

  2. 大数据 时间同步问题 解决hbase集群节点HRegionServer启动后自动关闭

    1)在hbase-site.xml文件中 修改增加 ,将时间改大点<property><name>hbase.master.maxclockskew</name>& ...

  3. Java并发编程（五）-- Java内存模型补充

    前面我们已经介绍了:当对象和变量存储到计算机的各个内存区域时,必然会遇到的两个问题及解决方法 共享对象的可见性-- 解决方法:使用java volatile关键字 共享对象的竞争现象 -- 解决方法: ...

  4. python基础一 ------如何获取多个字典相同的键

    需求: 足球赛第一场进去统计  {"A":3,"B":2,"C":1}足球赛第二场进去统计  {"A":3," ...

  5. BZOJ5207 : [Jsoi2017]隧道

    若$\min(n,m)<\min(n+1,m-1)$,则考虑计算左边与右边不连通的概率,然后用$1$减去它得到答案. 若$\min(n,m)\geq \min(n+1,m-1)$,则考虑计算对偶 ...

  6. 将Django部署到Linux

    https://cloud.tencent.com/developer/labs/lab/10372

  7. Java基础知识总结--final、finally、finalize的区别

    谈谈final.finally.finalize的区别 1.final修饰符:如果一个类被声明为final,意味着这个类不能再被派生出新的子类,不能作为父类被别的类继承.因此,一个类不能即被声明为ab ...

  8. JAVA分词包

    自然语言处理 中文分词 词性标注 命名实体识别 依存句法分析 关键词提取 自动摘要 短语提取 拼音 简繁转换 http://www.hankcs.com/nlp/ https://github.com ...

  9. C#自动识别文件编码

    以下代码源自:http://www.cnblogs.com/stulzq/p/6116627.html /// <summary> /// 用于取得一个文本文件的编码方式(Encoding ...

  10. ios程序中存储的回忆

    可编程序中的存储区域基本上分为:静态存储区,栈区,堆区,代码区. 1.静态存储区(全局存储区):该块内存在程序编译期间就已经分配好,并且在程序运行期间都一直存在,主要用于存储静态数据,全局数据和常量. ...