ajaxはファイルアップロードを実現し、アップロードの進捗状況を傍受する

2673 ワード

ローカルファイルのアップロードの実装では、

なお、enctype=「multipart/form-data」フォームにenctype=「multipart/form-data」を多く追加する必要があるのは、フォームのMIME符号化を設定することを意味する.デフォルトでは、この符号化フォーマットはアプリケーション/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();
  }