ajax实现文件上传并且监听上传进度

在实现上传本地文件中，可以用

需要注意的是，需要多添加enctype="multipart/form-data"  表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-encoded，不能用于文件上传；只有使用了multipart/form-data

利用formdata
formdata文件上传是以二进制流形式上传，且无需写额外代码。

var upload_file = document.getElementById('upload_file');
  upload_file.addEventListener('change', upload, false);

  function upload(){
    if(window.FormData){
      var formDate = new FormData($('#myForm')[0]);
      console.log("准备上传文件");
      $.ajax({
        url: '/uploadAPK',
        type:'POST',
        //数据
        data:formDate,
        //使jq不处理数据类型和不设置Content-Type请求头
        cache:false,
        contentType:false,
        processData:false,
        beforeSend :function () {
          console.log('发送ajax前')
        },
        xhr :function () {//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
          myXhr = $.ajaxSettings.xhr();
          if(myXhr.upload){
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false)//progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经接收的字节数，loaded表示根据Content-Length响应头部确定的预期字节数。
          }
        },
        success :function (data) {
          alert('success');
          console.log(data);
          data = eval('(' + data + ')');
          if(data.status = '0'){
            setTimeout(function () {
              var success_url = "http://" + location.host + "/report/";

            },2000)
          } else if(data.status = '1'){
            alert("上传失败,请重新上传!");
            fresh();
          } else{
            alert("上传异常,请重新上传!");
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("服务器错误,请重新上传");
          fresh();
        }
      })
    } else{
      alert('浏览器不支持上传方式，请更换浏览器！');
    }
  }

  function progressHandlingFunction(event) {
    if (event.lengthComputable) {
      var value = (event.loaded / event.total * 100 | 0);
      $("#progress_bar_top").css('width', (value + '%'));
    }
  }

  function fresh() {
    window.location.reload();
  }