Un bref enregistrement de certains codes qui téléchargent H5 ce matin et il y a encore des pièges
1. Affichage
Parce que le fichier de téléchargement frontal doit être passé par le formulaire de formulaire et qu'Ajax ne peut pas être utilisé. De cette façon, il n'est vraiment pas bon de mettre une entrée avec un fichier de type sur une page mobile. Comme le montre la figure ci-dessous, est-ce très frustrant?
Après avoir trouvé la solution, certains PC ont remplacé cette entrée par Flash, à l'aide de la bibliothèque d'outils JQuery telle que Uploadify, mais la plupart des navigateurs mobiles ne prennent pas en charge Flash. La méthode finale consiste donc à utiliser le formulaire de formulaire, il suffit de définir la transparence du formulaire et d'entrée sur 0, afin qu'ils soient dans un div avec le contenu étant préparé à afficher, et le contenu affiché peut être fabriqué comme vous le souhaitez. Le code est le suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <meta name = "Viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no"> <title> </ title> <style> div {width: 100%;} .logo img {affiche: block; marge: 0 auto;} .upload {position: relative; largeur: 80px; hauteur: 18px; line-height: 18px; fond: # 2fc7c9; text-align: Centre; Couleur: #fff; rembourrage: 0px 5px; -webkit-border-radius: 2px; border-radius: 2px; marge: 0 auto; } .Upload form {width: 100%; position: absolu; à gauche: 0; en haut: 0; Opacité: 0; Filtre: alpha (opacity = 0);}. .POLODOLLE Form Input {width: 100%;} </ style> </ head> <body> <div> <img src = "img / 1.jpg" /> </ div> <div> <p> Téléchargez l'image </p> <form> <entrée type = "file" /> </ form> </v> </v> </doftaning>L'aspect est comme indiqué dans l'image, il est donc affiché dans la "image de téléchargement" P-Tag. Cliquez sur celui-ci vous donnera l'effet de la sélection du fichier
2. Code JS
Je l'ai écrit assez simple, en utilisant simplement les fonctions de base du téléchargement H5
Le code HTML est le suivant, l'action est le chemin de la demande. Ce que je fais ici, c'est de télécharger et de modifier l'avatar lorsque le fichier change. L'attribut de nom de la balise d'entrée ne peut pas être omis, il est lié à l'interface backend.
<form id = "uploadform" encType = "multipart / form-data" metheth = "post" action = "xxxxxx"> <input type = "file" name = "imagefile" id = "imagefile" onchange = "fileselected ()" /> </ form>
var iMaxFilesize = 2097152; //2mwindow.fileSelected = function () {var ofile = document.getElementById ('imageFile'). Files [0]; // Lire le fichier var rfilter = / ^ (image // bmp | image // gif | image // jpeg | image // png | image // tiff) $ / i; if (! rfilter.test (onile.type)) {alert ("Le format de fichier doit être une image"); retour; } if (onile.size> iMaxFileSize) {alert ("La taille de l'image ne peut pas dépasser 2m"); retour; } var vfd = new FormData (document.getElementById ('uploadform')), // Créer une demande et des données oxhr = new xmlHttpRequest (); oxhr.addeventListener ('Load', fonction (resupload) {// Success}, false); oxhr.addeventListener ('error', function () {// a échoué}, false); oxhr.addeventListener ('about', function () {// Télécharger l'interrupteur}, false); oxhr.open («post», actionUrl); oxhr.send (vfd);};Les détails déterminent le succès ou l'échec, vous devez donc tout prendre au sérieux.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.