Sobre la base de mi blog anterior, la barra de progreso está optimizada.
Punto de optimización:
La barra de progreso anterior era demasiado real y se completó el procesamiento de datos de front-end, sin considerar si se procesaron los datos de back-end. De esta manera, una vez que un error de back-end hace que falle la operación del front-end y la barra de progreso del front-end llega al final, es fácil dar a los usuarios una guía incorrecta.
En esta mejora, la barra de progreso del front-end se establece artificialmente a un máximo del 98%, y la barra de progreso se mueve al 100% después de recibir la información de que se completó el procesamiento del back-end.
La razón por la que no lo modifiqué en el blog anterior y volví a escribir un artículo es porque el método en este blog requiere la cooperación de colegas de back-end. En el improbable caso de que un colega que conozca no le devuelva información, solo puede retirarse a la siguiente mejor opción.
texto
desde
<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 = "barra de progreso" id = "myModal_add_progressBar" role = "barra de progreso" aria-valuemin = "0" aria-valuemax = "100" aria-valuenow = "0" estilo = "ancho: 0;" >
</div>
</div>
Subir clave js
// Carga de imagen
$ (". NewFile"). On ('change', function (e) { var userName = $ (this) .parents (". Modal-content"). Find ("input [name = 'name '] "). val (); if (userName ==" ") { parent.layer.msg (" ¡Primero debes ingresar tu nombre! "); document.getElementById (" myModal_add_form "). reset (); return } else { if (Math.round (Number (e.currentTarget.files [0] .size) / 1024)> 10240) { parent.layer.msg ("La imagen es demasiado grande, comprime el tamaño y cárgala. ¡El tamaño máximo de la imagen es de 10 MB! "); Document.getElementById (" myModal_add_form "). Reset (); return } else { var activityId = $ ("# searchForm"). find ("seleccionar [nombre = 'activeId']"). val ();
var fileObj = e.currentTarget.files [0]; // js obtiene el objeto de archivo
var name = e.currentTarget.files [0] .name;
$ (". newFile"). parent ("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 (); // Objeto FormData
form.append ("file", fileObj); // file object
var xhr;
xhr = new XMLHttpRequest (); // XMLHttpRequest object
xhr.open ("post" , url, true); // modo de publicación, url es la dirección de solicitud del servidor, true este parámetro especifica si la solicitud se procesa de forma asíncrona.
xhr.
xhr.onerror = uploadFailed; // Solicitud fallida
xhr.upload.onprogress = progressFunction; // [Implementación del método de llamada de progreso de
carga ] xhr.upload.onloadstart = function () {// Método de ejecución de inicio de carga
ot = new Date (). getTime (); // Establecer la hora de inicio de la carga
oloaded = 0; // Establecer el tamaño del archivo de carga en 0 cuando comienza la carga
};
xhr.send (formulario); // Iniciar carga, enviar datos del formulario
// Mostrar barra de progreso
$ ("# myModal_add_progressBar_Module"). css ("mostrar", "bloquear");
}
}
});
// Subir la
función de respuesta satisfactoria uploadComplete (evt) { // El resultado devuelto por el servidor después de recibir el archivo var res = JSON.parse (evt.target.responseText); if (res.code == 0) { // Subir exitoso $ (".newFile"). parent ("div.col-sm-10"). find ("input [name = 'newFileMsg']"). val (res.data.url); $ (". newFile "). parent (" div.col-sm-10 "). find (" input [name = 'userId'] "). val (res.data.id); $ (". newFile "). parent (" div.col -sm-10 "). find (" input [name = 'faceId'] "). val (res.data.faceId); // La barra de progreso se establece en 100%; $ (" # myModal_add_progressBar " ) .css ("ancho", "100%"); $ ("# myModal_add_progressBar"). html ("100%"); } } // Error al cargar
function uploadFailed (evt) { parent.layer.msg ("Upload failed"); } // El método de implementación del progreso de carga, que se llamará con frecuencia durante el proceso de carga function progressFunction (evt) { // event.total es el total a transmitir Byte, event.loaded es el byte que se ha transmitido. Si event.lengthComputable no es verdadero, event.total es igual a 0 if (evt.lengthComputable) { // El límite de la barra de progreso nunca puede alcanzar el 100% cuando se carga, el máximo es 98%, a menos que se reciba el valor de retorno del backend. luego configúrelo en 100% $ ("#myModal_add_progressBar"). css ("ancho", 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 (); // Obtiene la hora actual var pertime = (nt-ot) / 1000;
ot = new Date (). getTime (); //
Tiempo de reasignación , usado para el siguiente cálculo var perload = evt.loaded-oloaded; // Calcula el tamaño del archivo de la carga multiparte, unidad b
oloaded = evt.loaded ; // Reasigne el tamaño del archivo cargado para el siguiente cálculo
}