JS HTML5拖拽上传图片预览

<div class="container">
  <p class="text">请将图片文件拖拽至此区域！</p>
</div>

<script type="text/javascript">
    $(function() {
      /思路
       1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
       2.拖拽放置后，获取到文件对象集合e.dataTransfer.files
       3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作
       4.读取文件信息对象new FileReader()，它有读取文件对象为DataUrl等方法readAsDataURL(文件对象)、读取成功之后触发的事件onload事件等，this.result为读取到的数据
       5.在FileReader对象中的几个事件中进行相应的逻辑处理
       
       /

      //必须将jq对象转换为js对象，调用原生方法
      var oDiv = $(".container").get(0);
      var oP = $(".text");
      //进入
      oDiv.ondragenter = function() {
          oP.html('');
        }
        //移动，需要阻止默认行为，否则直接在本页面中显示文件
      oDiv.ondragover = function(e) {

          e.preventDefault();
        }
        //离开
      oDiv.onleave = function() {
          oP.html('请将图片文件拖拽至此区域！');
        }
        //拖拽放置，也需要阻止默认行为
      oDiv.ondrop = function(e) {

        e.preventDefault();
        //获取拖拽过来的对象,文件对象集合
        var fs = e.dataTransfer.files;
        //若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合
        //打印长度
        console.log(fs.length);
        //循环多文件拖拽上传
        for (var i = 0; i < fs.length; i++) {
          //文件类型
          var _type = fs[i].type;

          console.log(_type);
          //判断文件类型
          if (_type.indexOf('image') != -1) {
            //文件大小控制
            console.log(fs[i].size);
            //读取文件对象
            var reader = new FileReader();
            //读为DataUrl,无返回值
            reader.readAsDataURL(fs[i]);
            reader.onloadstart = function(e) {
                //开始加载
              }
              // 这个事件在读取进行中定时触发
            reader.onprogress = function(e) {

              $("#total").html(e.total);
            }

            //当读取成功时触发，this.result为读取的文件数据
            reader.onload = function() {
                //文件数据
                // console.log(this.result);
                //添加文件预览
                var oImg = $("<img style='width:100px;' src='' />");
                oImg.attr("src", this.result);
                $(oDiv).append(oImg); //oDiv转换为js对象调用方法
              }
              //无论成功与否都会触发
            reader.onloadend = function() {
              if (reader.error) {
                console.log(reader.error);
              } else {
                //上传没有错误，ajax发送文件，上传二进制文件
              }
            }
          } else {
            alert('请上传图片文件！');
          }
        }

      }
    });
  </script>