Cet article partage des exemples d'exemples de téléchargement et de prévisualisation JS HTML5 pour votre référence. Le contenu spécifique est le suivant
Application principale
1. Les fichiers HTML5 peuvent sélectionner plusieurs fichiers et obtenir plusieurs informations de fichier
2. Objet XmlHttpRequest, envoyez une demande de transmission HTTP
3. Placer chaque fichier dans FormData pour la transmission
4. Utilisez Readasdataurl pour transformer directement le contenu de l'image en URL, placez-le dans le SRC de la balise IMG et générez des images prévisualisées.
Code HTML + CSS + JS
<! Doctype html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html" charset = "utf-8" /> <itle> test html fileReader </ title> <style type = "text / css"> html, corps, en-tête, pied de page, div, ul, li, h1, h2, h3, h4, h5, h6, étiquette, entrée, textarea, p, span, a {padding: 0; marge: 0;} img {border: 0;} em, Strong {Font-Weight: Normal; Style de police: normal;} ul {list-style: Aucun;} H1, H2, H3, H4, H5, H6 {Font-Weight: Normal; FONT-SIZE: 100%;} A, A: After {Text-Decoration: Aucun;}. Photo_Wrap {Clear: les deux;}. Photo_wrap li {margin: 10px; Largeur: 150px; float: gauche;}. Photo_box {hauteur: 150px; Largeur: 150px; débordement: caché; Position: relative;}. Photo_box .img1 {hauteur: 150px;}. Photo_box .img2 {width: 150px;}. upload_result {height: 50px;}. btn {position: relatif; hauteur: 40px; Largeur: 100px; float: gauche;}. btn {hauteur: 40px; hauteur de ligne: 40px; Couleur: #FFF; Affichage: bloc; Border-Radius: 3px; Texte-aligne: Centre; Color en arrière-plan: # FF5581; / * Old Browsers * / Background-Image: -moz-linear-Gradient (haut, # FA7B9C 0%, # FF5581 100%); / * Ff3.6 + * / background-image: -webkit-gradient (linéaire, haut gauche, en bas gauche, couleurs-stop (0%, # FA7b9c), couleurs-stop (100%, # ff5581)); / * Chrome, safari4 + * / background-image: -webkit-linear-gradient (top, # FA7b9c 0%, # ff5581 100%); / * Chrome10 +, safari5.1 + * / background-image: -o-linear-gradient (haut, # FA7b9c 0%, # ff5581 100%); / * Opéra 11.10+ * / background-image: -ms-linear-gradient (top, # FA7b9c 0%, # ff5581 100%); / * Ie10 + * / background-image: linéaire-gradient (en bas, # FA7b9c 0%, # ff5581 100%); / * W3C * / Filter: PROGID: DIMAGETRANSFORM.MICROSOFT.gradient (startColorstr = '# FA7B9C', ENDCOLORSTR = '# FF5581', GradientType = 0); / * Ie6-8 * / box-shadow: 0 1px 0 rgba (255, 255, 255, 0,3) inset, 0 1px 2px rgba (0, 0, 0, 0.3);}. Btn_add_pic {width: 100px; Position: absolue; en haut: 0; gauche: 0;}. btn_upload {width: 100px; marge: 0 10px 10px; float: gauche;}. btn: hover, .btn_cur {background-Color: # fb99b1; / * Old Browsers * / Background-Image: -moz-linear-Gradient (haut, # FB99B1 0%, # FF5581 100%); / * Ff3.6 + * / background-image: -webkit-gradient (linéaire, haut gauche, en bas gauche, couleurs-stop (0%, # fb99b1), couleurs-stop (100%, ## ff5581)); / * Chrome, safari4 + * / background-image: -webkit-linear-gradient (top, # fb99b1 0%, # ff5581 100%); / * Chrome10 +, safari5.1 + * / background-image: -o-linear-gradient (top, # fb99b1 0%, # ff5581 100%); / * Opéra 11.10+ * / background-image: -ms-linear-gradient (top, # fb99b1 0%, # ff5581 100%); / * Ie10 + * / background-image: linéaire-gradient (en bas, # fb99b1 0%, # ff5581 100%); / * W3C * / Filter: PROGID: DIMAGETRANSFORM.MICROSOFT.gradient (startColorstr = '# fb99b1', EndColorstr = '# ff5581', gradientType = 0); / * Ie6-8 * /}. File_input_wrap {position: absolue; en haut: 0; à gauche: 0; Largeur: 100px; hauteur: 40px;}. File_input_wrap étiquette {largeur: 100%; hauteur: 100%; Affichage: bloc; Opacité: 0; curseur: pointeur;}. File_input_wrap entrée {opacité: 0; Filtre: alpha (opacité = 0); / * ie8 et ci-dessous * / position: absolu; En haut: 7px; À droite: 173px; curseur: pointeur; largeur: 95px;}. Photo_box .icon_pos {hauteur: 20px; Largeur: 20px; Affichage: bloc; Position: absolue; à droite: 0; en bas: 0;}. Photo_box .Loading {height: 10px; Affichage: bloc; Position: absolue; à gauche: 0; en bas: 0; Background-Image: url (charging.gif);}. SUCESS_ICON {background-iMage: url (icons_01.png); Position d'arrière-plan: 0 0;}. ERROR_ICON {Background-Image: URL (icons_01.png); Position en arrière-plan: -20px 0;} </ style> </ head> <body> <v> <a id = "j_add_pic" href = "javascript :;"> Ajouter l'image </a> <v> <input type = "file" id = "file" name = "file" accepte = "image / *" multiple onchange = "fileinfo (this)" /> <label / étiquette id = "j_add_area"> </ label> </ div> </ div> <a id = "j_upload" href = "javascript :;"> Démarrer le téléchargement </a> <div id = "j_photo_wrap"> <ul> </ul> </ div> </ body> <script type = "text / javascript" src = "jQuery-1.7.2.min.js"> </ script> <script type = "text / javascript"> var img_index = new array (); fonction upload_img () {var j = 0; img (); fonction img () {// 1. Créer un objet XmlHttpRequest if (img_index.length> 0) {var singleImg = img_index [j]; var xmlhttp; if (window.xmlhttprequest) {// ie7 +, firefox, chrome, opéra, safari xmlhttp = new xmlhttprequest; // Corrigez si pour certaines versions spécifiques des bugs de navigateur Mozillar (xmlhttp.OverridemiMetype) {xmlhttp.OverRidemiMetype ('Text / Xml'); }; } else if (window.activexObject) {// ie6, ie5 xmlhttp = new activeXObject ("Microsoft.xmlhttp"); }; if (xmlhttp.upload) {// Progress Bar xmlhttp.upload.addeventListener ("progress", fonction (e) {if (e.lengthcompautable) {var load_percent = (e.loaded / e.total) * 100; $ ('# j_photo_wrap ul li '). eq (j) .find ('. chargement '). css (' width ', load_percent +'% ');}}, false); // 2. Fonction de rappel // OnReadyStateChange est la fonction de poignée de l'événement appelé chaque fois que la propriété ReadyState change xmlhttp.onreadystateChange = function (e) {if (xmlhttp.readystate == 4) {if (xmlhttp.state == 200) {var json = eval ('(' + xmlhtp.ResSponSeXt + '); if (json.status == 1) {$ ('# j_photo_wrap ul li'). eq (j) .find ('. upload_result'). text (singleimg.name + 'upload terminé'); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Chargement'). Hide (); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('success_icon'); } else {$ ('# j_photo_wrap ul li'). eq (j) .find ('. upload_result'). text (singleimg.name + 'upload failli'); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Chargement'). Hide (); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('error_icon'); }} else {$ ('# j_photo_wrap ul li'). eq (j) .find ('. upload_result'). text (singleimg.name + 'upload failli'); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Chargement'). Hide (); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Chargement'). Hide (); $ ('# J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). AddClass ('error_icon'); } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Définissez les informations de connexion // Initialiser les paramètres de demande HTTP, mais n'envoyez pas de demandes. // La première méthode de connexion de paramètre est, la seconde est l'adresse URL, et le troisième vrai est une connexion asynchrone, qui est asynchrone par défaut // Envoi des données à l'aide de la méthode post xmlhttp.open ("post", "upload.php", true); // 4. Envoyez des données, commencez à interagir avec les demandes HTTP du serveur //, utilisez les paramètres transmis à la méthode Open () et la demande facultative transmise à la méthode. Si c'est vrai, la phrase Send sera exécutée immédiatement // S'il est faux (synchrone), l'envoi ne sera exécuté qu'après que les données du serveur reviennent // la méthode ne nécessite pas de contenu dans Send var formData = new formData (); formdata.append ("filedata", singleMg); xmlhttp.send (formdata); } //}}}}; $ ('# J_upload'). Cliquez sur (fonction () {upload_img ();}); $ ('# J_add_area'). Hover (function () {$ ('# j_add_pic'). AddClass ('btn_cur');}, function () {$ ('# j_add_pic'). $ ('# J_add_area'). Cliquez sur (fonction () {$ ('# file'). Cliquez sur ();}); function resize (img) {if (img.offsetheight> img.offsetwidth) {$ (img) .removeclass ('img1'). addClass ('img2'); } else {$ (img) .reMoveClass ('img2'). addClass ('img1'); }} fonction fileInfo (source) {var ireg = /image//.*/i; var fichiers = source.files; nom var, taille, type; pour (var i = 0, f; f = fichiers [i]; i ++) {name = f.name; Taille = F.Size; type = f.type; if (! Type.match (ireg)) {$ ('# j_photo_wrap ul'). append ('<li> <div>' + name + 'n'est pas une image <span> </span> <span> </span> </div> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('# j_photo_wrap ul'). APPEND ('<li> <div>' + name + 'est trop grand pour générer un aperçu <span> </span> <span> </span> </div> <div> </div> </li>'); } else {if (window.fileReader) {var fr = new fileReader (); fr.onload = (fonction (f) {return function (e) {$ ('# j_photo_wrap ul'). APPEND ('<li> <div> <img onload = "redimensit (this);" src = "' + this.result + '" /> <span> </span> <pan> </span> <v> </v> </li>');}); Fr.readasdataurl (f); }}}}}}}; </ script> </html>PHP a reçu le code de fichier (ici n'obtient que le nom, le type et la taille du fichier, et aucune autre opération n'est effectuée)
<? php $ name = $ _files ['filedata'] ['name']; $ type = $ _files ['filedata'] ['type']; $ size = $ _files ['filedata'] ['taille']; $ return = array ("name" => $ name, "type" => $ type, "size" => $ size, "status" => 1); $ return = json_encode ($ return); echo $ return ;?>Problèmes existants
1. Afin de générer des miniatures, ReadAsDataurl prendra la mémoire lors de la lecture du contenu du fichier, donc les grandes images entraîneront le respect du navigateur.
2. Le téléchargement n'est pas traité dans la segmentation
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.