Le premier projet a finalement été lancé. Il s'agit d'une plate-forme de financement participatif de protection sociale appelée Qinqingchou. La plupart des interfaces WeChat, Computer et Backend ont été achevées par moi. Après quelques mois, je pense que j'ai gagné beaucoup et je pense que j'ai besoin de le résumer.
La première chose qui me vient à l'esprit est le problème du téléchargement d'images. Lorsque les données de formulaire sont généralement téléchargées par Ajax, il semble stupide d'utiliser des formulaires de formulaire pour télécharger des images. Ensuite, à ce moment-là, je n'ai pas pensé à utiliser le plugin JQuery Form.
La solution donnée par un collègue en arrière-plan est d'écrire un formulaire de formulaire dans un iframe, puis de télécharger l'image et de soumettre automatiquement le formulaire. Il sautera à l'adresse de l'image sur le serveur à l'URL de la page, et je l'intercepterai.
Solution 1: Formulaire iframe + formulaire
<form action = "/ user / uploadIdCard.do" EncType = "multipart / form-data" metheth = "post"> <input type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn"> + <img src = "" /> </ labe> <upy type = "text" name = "tournurl"> </ form> $ (". Turnurl"). Val (window.location.pathname); $ ("# uploadpic"). sur ('change', fonction (événement) {event.preventDefault (); $ ("form"). soumise ();});Introduisez un iframe dans l'interface où l'image doit être téléchargée, appelez la méthode iframe dans la bibliothèque publique, obtenez l'URL de l'image et affichez l'image dans l'Iframe
// Extraire le chemin du chemin dans la fonction iframe iframe (el) {var substanTl = ""; var code, filepath; var place = $ (el) [0] .ContentWindow.Location.search; console.log (place); if (place) {code = place.match (/ code = / d + /) [0]. {filepath = place.match (/ filepath = / s + /) [0] .substr (9);} $ (el) .contents (). find (". Tip"). CSS ('Color', '# d0021b'); console.log (filepath); Switch (code) {case "200": el) .Contents (). avec succès '); $ (el) .contents (). find (". Tip"). CSS (' Color ',' # 55A012 '); $ (el) .contents (). find ("# filebtn> img"). show (). att ("src", baslurl + "/" + filepath); retour "/" + filepat "206": $ (el) .contents (). Find (". Tip"). Text ('fichier trop grand'); casse; case "207": $ (el) .contents (). Find (".Solution 2: Plus tard, j'ai découvert qu'il y avait deux problèmes avec cette approche. L'une était que les photos envoyées par l'utilisateur étaient trop grandes et que l'arrière-plan ne le comprimait pas (les collègues en arrière-plan étaient trop occupés. Afin de les accueillir, nous l'avons comprimé à l'avant).
La seconde est qu'après le succès du téléchargement de l'image, l'image sera affichée sur l'IFRAME, ce qui nécessite un certain temps de réaction. Parfois, l'utilisateur signalera que l'image ne peut pas être téléchargée, mais en fait, c'est juste que l'arrière-plan n'a pas encore retourné ...
J'ai donc décidé de le télécharger sur l'arrière-plan en utilisant la base64
<input type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn"> + <img src = "" /> </ label> <span> s'il vous plaît télécharger l'image, la taille est dans 2m <br/> (le type d'image peut être jpg, jepg, png, gif, bmp) <br/> 640 * 400 </span> <input type = "text" name = "tururl"> <canvas id = "uploadimg" style = "affiche: aucun"> </ canvas>
La structure est similaire à celle d'origine, mais il y a une toile supplémentaire
$ ("# uploadpic"). sur ('change', fonction (event) {event.preventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) {alert ("s'il vous plaît télécharger l'image moins que 2m"); (! / image /// w + /. test (file.type)) {alert ("le fichier doit être une image!"); return false;} var lecter = new FileReader (); reader.readaSdataurl (file); reader.onload = function (e) {createCanvas (this.result);}}); function createCanvas (src) {var canvas = document.getElementById ("uploadImg"); var cxt = canvas.getContext ('2d'); canvas.width = 640; canvas.height = 400; var img = new image (); img.src = src; img.onload = function () {// var w = img.width; // var h = img.height; // // canvas.width = w; // canvas.height = h; cxt.drawimage (img, 0, 0,640 400); // cxt.drawimage (img, 0, 0); $ (". "/front/uploadByBase64.do",type:" post ", data: {" imgstr ": canvas.todataurl (" image / jpeg ", 0.9) .split (',') [1]}, succès: fonction (data) {console.log (data); $ (". data.url);}});}}1. Tout d'abord, utilisez les informations du fichier d'entrée du fichier pour déterminer le fichier File File.Size et si le fichier est un fichier image.type
2. Ensuite, utilisez l'interface FileReader de HTML5 pour obtenir les données Base64 de cette image.
3. Passez cette base64 en toile et servez de SRC d'une image. À l'heure actuelle, vous pouvez définir la taille de la résolution de l'image pour vous assurer que les images téléchargées ont une résolution unifiée. Bien sûr, il peut également être basé sur la taille d'origine de l'image.
4. Avant Ajax, affichez directement la base 20-TRACEDE64 (afin que l'utilisateur puisse immédiatement voir l'image téléchargée), puis passer Canvas.Todataurl ("Image / JPEG", 0.9) .split (',') [1] (Le type est l'image / JPEG, vous pouvez utiliser le deuxième paramètre pour définir la qualité d'image) sur l'interface correspondante dans l'arrière-plan
5. Ensuite, liez l'URL renvoyé en arrière-plan sur la propriété Data-URL de l'image, et obtenez simplement les données-URL lorsque Ajax est soumis, afin que l'utilisateur puisse le voir aussi vite que possible, et l'URL est en fait encore en cours d'Ajax à l'arrière-plan.
PostScript: il y a un problème avec les deux solutions, qui téléchargeront beaucoup d'images redondantes sur l'arrière-plan. Mais les collègues en arrière-plan ne semblent avoir aucune objection.
L'effet réel est comme ça http://www.qqchou.org/qqcweb/pages/photoiframe.html
Ce qui précède est la pratique du projet, le formulaire de téléchargement d'image ou la compression d'image frontale Base64 (compression d'image frontale) introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!