Heim > Artikel > Web-Frontend > Wie erhalte ich den Datei-Upload-Fortschritt in js? js-Code, um den Datei-Upload-Fortschritt zu ermitteln

Wie erhalte ich den Datei-Upload-Fortschritt in js? js-Code, um den Datei-Upload-Fortschritt zu ermitteln

不言Original: 2018-08-07 11:31:203009Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man den Datei-Upload-Fortschritt in js erhält. js-Code, um den Datei-Upload-Fortschritt zu erhalten, er hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

js, um den Datei-Upload-Fortschritt zu erhalten:

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

js-Überwachung:

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

Ajax-Datei-Upload-Funktion:

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);
                   },
               })
	}

Vollständiger Code:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
	  <input name="file" id="FileUpload" type="file" />

	  <input type="button" onclick="Submit()" value="提交" />

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	var xhrOnProgress=function(fun) {
	  xhrOnProgress.onprogress = fun; //绑定监听
	  //使用闭包实现监听绑
	  return function() {
	    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
	    var xhr = $.ajaxSettings.xhr();
	    //判断监听函数是否为函数
	    if (typeof xhrOnProgress.onprogress !== &#39;function&#39;)
	      return xhr;
	    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
	    if (xhrOnProgress.onprogress && xhr.upload) {
	      xhr.upload.onprogress = xhrOnProgress.onprogress;
	    }
	    return xhr;
	  }
    }
	
	function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
		 var formFile = new FormData();
		
         formFile.append("file", fileObj); //加入文件对象
        
          var data = formFile;
          $.ajax({
                   url: "http://up.qiniu.com/",
                   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);
                   },
               })
	}
	
</script>
</html>

Empfohlene verwandte Artikel :

Wie verwende ich natives JavaScript, um Karussellbilder zu implementieren? Detaillierte Code-Erklärung

Detaillierte Erklärung von js-Fällen, in denen ganze Zahlen und Reste verwendet werden (mit Code)

[js]: Benutzereingaben und Text erkennen Box-Standardstileinstellung, Designtabellenstil, um Auswahl und umgekehrte Auswahl zu realisieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Datei-Upload-Fortschritt in js? js-Code, um den Datei-Upload-Fortschritt zu ermitteln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie implementiert man ein Karussell mit nativem JavaScript? Detaillierte Code-ErklärungNächster Artikel：Wie implementiert man ein Karussell mit nativem JavaScript? Detaillierte Code-Erklärung

In Verbindung stehende Artikel

Mehr sehen