Native JavaScript implements asynchronous multi-file upload_javascript skills

This is a modified version of the previous article. You can continue to use it as long as the background code remains unchanged, but the script no longer uses jQuery and is replaced by native JavaScript code, so we mainly look at the JS code.

First introduce the technical parameters:

Page technology: HTML5

Backend technology: Servlet 3.0

Server: Tomcat 7.0

Script: JavaScript

HTML5 New attributes of file component

accept : If you add this attribute to the file component, you can directly control the uploaded file type, which is really convenient.

multiple: Whether to allow multiple file selection
HTML5 page code modified

<img     style="max-width:90%"  style="max-width:90%"/ alt="Native JavaScript implements asynchronous multi-file upload_javascript skills" ><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

The value of accept can be found in: IANA MIME types (a complete list of standard MIME types). If you are using DW development, the software itself will have prompts.

If you select multiple files, you can use JS to print in a loop to see the name, type and size of the files. See the demo code

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
  " , 文件类型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

Now that you can loop through multiple files, you can try uploading multiple files.

1. First create the XMLHttpRequest object

//This is a global variable. Because it is an example, it does not determine the browser type. If the lower version of IE writes like this, there will be problems
var xhr = new XMLHttpRequest()
2. The previous article introduced the progress event (Progress). This time, two events, progress and error, are implemented

error: Triggered when an error occurs in the request.

Corresponding to upload failure caused by an error during upload: uploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
　　progress：在接收相应期间持续不断触发。

　　　　　　对应上传进度方法：onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

The last step is the upload method. Note that the upload method in the above html code also needs to be changed to the uploadFile() method to use it normally.

 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 

PS: After all, this is just a demonstration example of basic functions. It is still far from the company's requirements. Please be careful when using it on the company platform.

You can combine this article to learn: How to implement the progress bar of Ajax file upload based on HTML5 (jquery version)

The above is the entire content of this article, I hope it will be helpful to everyone’s study.