jsでファイルのアップロードの進行状況を取得するにはどうすればよいですか?ファイルのアップロードの進行状況を取得するjsコード

この記事の内容は、jsでファイルアップロードの進行状況を取得する方法についてです。ファイルのアップロードの進行状況を取得するための js コードです。必要な友人が参考になれば幸いです。

js ファイルアップロードの進行状況を取得する:

<input name="file" id="FileUpload" type="file" />
<input type="button" onclick="Submit()" value="提交" />

js モニタリング:

var xhrOnProgress=function(fun) {
	  xhrOnProgress.onprogress = fun; //绑定监听
	  //使用闭包实现监听绑
	  return function() {
	    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
	    var xhr = $.ajaxSettings.xhr();
	    //判断监听函数是否为函数
	    if (typeof xhrOnProgress.onprogress !== 'function')
	      return xhr;
	    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
	    if (xhrOnProgress.onprogress && xhr.upload) {
	      xhr.upload.onprogress = xhrOnProgress.onprogress;
	    }
	    return xhr;
	  }
}

ajax ファイルアップロード関数:

function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
		 var formFile = new FormData();
		 
         formFile.append("file", fileObj); //加入文件对象
        
          var data = formFile;
          $.ajax({
                   url: url,
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   xhr:xhrOnProgress(function(e){
		   			  var percent=e.loaded/e.total;//文件上传百分比
		   			  console.log(percent);
		   		   }),
                   success: function (result) {
                       console.log(result);
                   },
               })
	}

完全なコード:えー

おすすめ関連記事:

ネイティブ JavaScript を使用してカルーセル画像を実装するにはどうすればよいですか?詳細なコード説明

整数と剰余を取るjsケースの詳細な説明（コード付き）

【js】: ユーザー入力の検出、テキストボックスのデフォルトスタイル設定、全選択と反転選択を実現するテーブルスタイルの設計

以上がjsでファイルのアップロードの進行状況を取得するにはどうすればよいですか?ファイルのアップロードの進行状況を取得するjsコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。