<input type="file"> realizar la carga de archivos

Hola, hola, estoy aquí de nuevo. Hoy hablaré sobre un ejemplo común en un proyecto, que es usar input type="file" para cargar archivos en el formulario. Primero, escribimos html, de la siguiente manera.

    <form id="form1" action="/" method="post" enctype="multipart/form-data">
        <div>
            <label for="profile_pic">Choose file to upload</label>
            <input multiple="multiple" type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png">
        </div>
        <div>
            <button type="button" id="btn">提交</button>
        </div>
    </form>

Este es un formulario de formulario, el método de método es publicación y el atributo de acción especifica dónde enviar los datos del formulario cuando se envía el formulario. (Este es un atributo requerido), usamos directamente '/' en su lugar. enctype es la abreviatura de encode type , lo que significa el tipo de codificación. De forma predeterminada, el valor de enctype es application/x-www-form-urlencoded, que no se puede usar para cargar archivos. Solo cuando se usa multipart/form-data se pueden transmitir los datos del archivo por completo.

Luego podemos usar input type="file" para hacer clic para cargar archivos. Múltiple es varios, aquí significa que se pueden cargar varios archivos ( mantenga presionada la tecla ctrl para seleccionar varios archivos ). accept puede limitar el tipo de carga de archivos, como cargar solo archivos de imagen, archivos de video, archivos de audio, etc. Luego hacemos clic en este botón, y cuando no escribimos type="button", encontraremos que podemos enviar directamente sin escribir js . ¿por qué? Resulta que el botón tiene un atributo de tipo, y el tipo tiene tres atributos opcionales: botón, enviar, restablecer , y el valor predeterminado del atributo de tipo del botón es enviar , por lo que cuando no se especifica el atributo de tipo, al hacer clic en el botón El botón desencadena el envío del formulario de formulario. Solución: agregue un atributo de tipo al botón, establezca el valor del atributo en el botón y el problema está resuelto.

Ahora escriba js para la validación del formulario, el código es el siguiente:

        const btn = document.getElementById("btn");
        const form1 = document.getElementById("form1");
        const pic = document.getElementById("profile_pic");
        btn.onclick = function () {
            //如果文件输入框的文件的长度为0，则弹出警告
            if (pic.files.length == 0) {
                alert("请先至少选择一个文件！");
                return;
            }
            //提交文件    HTMLFormElement.submit() 用来提交表单 <form>。
            //判断文件是否符合要求
            for (let i = 0; i < pic.files.length; i++) {
                console.log(i);  //0 1 2 3
                if (!checkFormat(pic.files[i])) {
                    alert("请确保上传的文件符合要求(.jpg/.png/.jpeg)")
                    return
                }
            }
            alert("上传成功!")
            form1.submit();
        }

        function checkFormat(o) {
            let filename = o.name;//文件名称
            let suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();  //png jpg等
            let file_format = ['jpg', 'png', 'jpeg'];
            //看看这个后缀存不存在于file_format数组当中
            if (file_format.includes(suffix)) {
                return true
            }
            return false
        }

1. Primero obtenga el objeto dom del botón, formulario e ingrese [tipo = "archivo"]. Cuando se hace clic en el botón, se considera que si la longitud del archivo en el cuadro de entrada del archivo es 0, aparecerá una advertencia. pop up, y luego return prohíbe el envío. 

2. Luego, si hay un archivo, haga clic en Enviar para determinar si el formato de archivo cumple con los requisitos. Aquí se encapsula un método (checkFormat) y el parámetro es un objeto. Si el sufijo del último "." en el nombre del objeto es el valor en la matriz especificada, devuelve verdadero, de lo contrario, devuelve falso. El método include en la nueva función ES6 se usa aquí para determinar si el nombre del sufijo está en la matriz. Si falta uno, aparecerá una advertencia: asegúrese de que el archivo cargado cumpla con los requisitos (.jpg/.png/.jpeg) y luego vuelva a prohibir el envío.

3. Si todos están satisfechos, el envío es exitoso.

Si tiene alguna pregunta, bienvenido a discutir en el área de comentarios, ¡hasta la próxima!