On the basis of my previous blog, the progress bar is optimized.
Optimization point:
The previous progress bar was too real, and the front-end data processing was completed, without considering whether the back-end data was processed. In this way, once a back-end error causes the front-end operation to fail, and the front-end progress bar goes to the end, it is easy to give users wrong guidance.
In this improvement, the front-end progress bar is artificially set to a maximum of 98%, and the progress bar is moved to 100% after receiving the information that the back-end processing is completed.
The reason why I didn't modify it in the previous blog and rewrite an article is because the method in this blog requires the cooperation of back-end colleagues. In the unlikely event that a colleague you meet does not return information to you, you can only retreat to the next best thing.
text
from
<form class='form-horizontal' id="myModal_add_form">
<div class='form-group'>
<label class='col-sm-2 control-label'>上传图像：</label>
<div class='col-sm-10'>
<input type="file" class="newFile"/>
<input type="hidden" name="newFileMsg" data-name=""/>
<input type="hidden" name="userId"/>
<input type="hidden" name="faceId"/>
</div>
</div>
<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module">
<label class='col-sm-2 control-label'>上传进度：</label>
<div class='col-sm-10'>
<div class="progress">
<div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" >
</div>
</div>
</div>
</div>
</form>
Upload key js
//Picture upload
$(".newFile").on('change', function(e){ var userName=$(this).parents(".modal-content").find("input[name='name ']").val(); if(userName == ""){ parent.layer.msg("You must fill in your name first!"); document.getElementById("myModal_add_form").reset(); return }else{ if(Math.round(Number(e.currentTarget.files[0].size)/1024)> 10240){ parent.layer.msg("The picture is too big, please compress the size and upload it! The maximum size of the picture is 10 MB!") ; document.getElementById("myModal_add_form").reset(); return }else{ var activityId = $("#searchForm").find("select[name='activeId']").val();
var fileObj = e.currentTarget.files[0]; // js gets the file object
var name = e.currentTarget.files[0].name;
$(".newFile").parents("div.col-sm-10 ").find("input[name='newFileMsg']").attr("data-name",name);
var url="/faceRecognition/activityManage/uploadImg?name="+userName+"&activityId="+activityId ;
var form = new FormData(); // FormData object
form.append("file", fileObj); // file object
var xhr;
xhr = new XMLHttpRequest(); // XMLHttpRequest object
xhr.open("post", url, true); //post mode, url is the server request address, true this parameter specifies whether the request is processed asynchronously.
xhr.
xhr.onerror = uploadFailed; //Request failed
xhr.upload.onprogress = progressFunction;//[Upload progress call method implementation]
xhr.upload.onloadstart = function(){//Upload start execution method
ot = new Date(). getTime(); //Set the upload start time
oloaded = 0;//Set the upload file size to 0 when the upload starts
};
xhr.send(form); //Start upload, send form data
//Display progress bar
$("#myModal_add_progressBar_Module").css("display","block");
}
}
});
//Upload successful response
function uploadComplete(evt){ //The result returned by the server after receiving the file var res=JSON.parse(evt.target.responseText); if(res.code == 0){ //Upload successful $( ".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(res.data.url); $(".newFile"). parents("div.col-sm-10").find("input[name='userId']").val(res.data.id); $(".newFile").parents("div.col -sm-10").find("input[name='faceId']").val(res.data.faceId); //The progress bar is set to 100%; $("#myModal_add_progressBar").css(" width","100%"); $("#myModal_add_progressBar").html("100%"); } } //Upload failed
function uploadFailed(evt){ parent.layer.msg("Upload failed"); } //The upload progress implementation method, which will be called frequently during the upload process function progressFunction(evt) { // event.total is the total to be transmitted Byte, event.loaded is the byte that has been transmitted. If event.lengthComputable is not true, event.total is equal to 0 if (evt.lengthComputable) { //The progress bar limit can never reach 100% when uploading, the maximum is 98%, unless the backend return value is received, then set to 100% $( "#myModal_add_progressBar").css("width", Math.floor(evt.loaded / evt.total * 100)-2 + "%"); $("#myModal_add_progressBar").html(Math.floor(evt. loaded / evt.total * 100)-2 + "%"); } var nt = new Date().getTime();//Get the current time var pertime = (nt-ot) / 1000;
ot = new Date().getTime(); //Re-assignment time, used for the next calculation
var perload = evt.loaded-oloaded; //Calculate the file size of the multipart upload, unit b
oloaded = evt.loaded; //Re-assign the uploaded file size for the next calculation
}