Un breve registro de algunos códigos que están cargando H5 esta mañana y todavía hay dificultades
1. Mostrar
Porque el archivo de carga frontal debe pasar a través del formulario del formulario, y AJAX no se puede usar. De esta manera, realmente no es bueno poner una entrada con el archivo de tipo en una página móvil. Como se muestra en la figura a continuación, ¿es muy frustrante?
Después de encontrar la solución, algunas PC reemplazaron esta entrada con Flash, utilizando la biblioteca de herramientas de jQuery, como la carga, pero la mayoría de los navegadores móviles no admiten flash. Entonces, el método final es usar el formulario de formulario, simplemente establezca la transparencia del formulario y la entrada en 0, para que estén en un DIV con el contenido que se está preparando para mostrarse, y el contenido mostrado se puede hacer como desee. El código es el siguiente:
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1.0, user-scalable = no"> <title> </title> <style> div {width: 100%;} .logo img {display: block; margen: 0 auto;} .Upload {posición: relativo; ancho: 80px; altura: 18px; línea de línea: 18px; fondo: #2fc7c9; text-align: center; color: #fff; relleno: 0px 5px; -webkit-border-radio: 2px; border-radius: 2px; margen: 0 auto; } .Pload Form {ancho: 100%; posición: absoluto; Izquierda: 0; arriba: 0; Opacidad: 0; Filtro: Alpha (opacidad = 0);} .Upload Form Enume {Width: 100%;} </style> </head> <body> <div> <img src = "img/1.jpg"/> </div> <div> <p> cargar imagen </p> <form> <input type = "file"/> </form> </iv> </body </html>La apariencia es como se muestra en la imagen, por lo que se muestra en la "imagen de carga" P-Tag. Hacer clic en él le dará el efecto de seleccionar el archivo
2. Código JS
Lo escribí bastante simple, solo usando las funciones básicas de la carga H5
El código HTML es el siguiente, la acción es la ruta para solicitar. Lo que estoy haciendo aquí es cargar y modificar el avatar cuando cambia el archivo. El atributo de nombre de la etiqueta de entrada no se puede omitir, está relacionado con la interfaz de backend.
<Form ID = "uploadform" enctype = "multipart/form-data" método = "post" action = "xxxxxxx"> <input type = "file" name = "imageFile" id = "imagefile" onchange = "filesElected ()"/> </form>
var imaxfilesize = 2097152; //2MWindow.FilesElected = function () {var Ofile = document.getElementById ('ImageFile'). Archivos [0]; // Lea el archivo var rfilter =/^(imagen // bmp | imagen // gif | imagen // jpeg | imagen // png | imagen // tiff) $/i; if (! rfilter.test (ofile.type)) {alert ("formato de archivo debe ser una imagen"); devolver; } if (ofile.size> iMaxFilesize) {alerta ("El tamaño de la imagen no puede exceder 2m"); devolver; } var vfd = new FormData (document.getElementById ('uploadform')), // crea solicitud y datos oxhr = new xmlhttprequest (); oxhr.AddeventListener ('load', function (resupload) {// éxito}, falso); oxhr.addeventListener ('error', function () {// fallado}, falso); oxhr.addeventListener ('abort', function () {// cargar interrupción}, falso); oxhr.open ('post', ActionUrl); oxhr.send (vfd);};Los detalles determinan el éxito o el fracaso, por lo que debe tomar todo en serio.
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.