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

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

不言

Freigeben： 2018-08-07 11:31:20

Original

3051 Leute haben es durchsucht

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="提交" />

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!