Simple file upload progress bar

Upload Files (ie, file type input label), use the progress event upload attributes XMLHttpRequest object, the event object for the event can return data upload progress

XMLHttpRequestObject.upload.onprogress = function(e){};

E.loaded which represents the size of the data has been uploaded, e.total represents the size of the entire file, with e.loaded divided e.total can get upload progress

So how to implement it using the XHR send out a form?

We can use FormData class object quickly into key-value pairs to form the structure of the way the form and send it out as requested topic

as follows

<form>
		<input type="text" name="username" >
		<input type="password" name="userpwd" >
		<input type="file" name="userfile" >
		<input type="button" value="提交">
</form>

<script>
    var form = document.querySelector("form");
    var formObj = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open('post','data.php');
    xhr.send(formObj);
</script>

Since the object has the form FormData form data conversion is good, it is not provided with the request header, this time by the value of the form can obtain the value of the name attribute in the form element server

In summary, we achieve a simple file upload progress bar with the following code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.outer {
			width:400px;
			height:30px;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.inner {
			width:0px;
			height:28px;
			background-color: yellowgreen;

		}
	</style>
</head>
<body>
	<form>
		<input type="text" name="username" >
		<input type="password" name="userpwd" >
		<input type="file" name="userfile" >
		<input type="button" value="提交">
	</form>
	<! - progress bar housing -> 
	<div class = "Outer"> 
		<! - progress bar -> 
		<div class = "Inner"> </ div> 
	</ div> 
	<Script of the type = "text / JavaScript "> 
		// Get form form 
		var = document.querySelector form (" form "); 
		// Get the submit button 
		var = Submit document.querySelector (" INPUT [= button type] "); 
		// Get the progress bar 
		var inner = document.querySelector ( "Inner."); 
		// set event to the submit button 
		submit.onclick = function () { 
			// use quick format FormData form form 
			var = formObj new new FormData (form); 
			// Create Object xhr 
			var xhr the XMLHttpRequest new new = (); 
			// set the uploading and URLs 
			xhr.open ( 'post', 'data.php '); 
			// FormData already formatted as well, so do not set the request header 
			// XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			// whenever a change to trigger upload progress event schedule, changing the length of the progress bar 
			xhr.upload.onprogress = function (E) { 
				// the maximum length of the progress bar 398 is 
				inner.style.width = ((e.loaded / e. Total) * 398) + 'PX'; 
			} 
			// send a request to form the form formatted as a transmission body 
			xhr.send (formObj); 
		} 
	</ Script> 
</ body> 
</ HTML>

　　Summary of steps:

The file contains the type of form by the constructor format FormData
Create XMLHttpRequest object and set transmission mode (post) and URL requests
Set upload progress event, use the event object gets its percentage upload progress and change the length of the progress bar
Send requests theme

Simple file upload progress bar

Guess you like