El primer proyecto finalmente se ha lanzado. Es una plataforma de crowdfunding de bienestar público llamada QinqingChou. La mayoría de las interfaces WeChat, Computer y Backend han sido completadas por mí. Después de unos meses, siento que he ganado mucho y creo que necesito resumirlo.
Lo primero que me viene a la mente es el problema de cargar imágenes. Cuando AJAX suele cargar los datos del formulario, se siente estúpido usar formularios de formulario para cargar imágenes. Luego, en ese momento, no pensé en usar el complemento de formulario jQuery.
La solución dada por un colega en segundo plano es escribir un formulario de formulario en un iframe, y luego cargar la imagen y enviar el formulario automáticamente. Saltará a la dirección de la imagen en el servidor a la URL de la página, y la interceptaré.
Solución 1: formulario de iframe+
<form de acción = "/user/uploadidcard.do" enctype = "multipart/form-data" método = "post"> <input type = "file" id = "uploadPic" name = "file"> <etiqueta for = "uploadpic" id = "filebtn">+<img src = "/> </selabel> <input type =" text "name =" turnurl "</</formy"> </formy> </formy> </formy> </formul $ (". Turnurl"). Val (Window.location.pathName); $ ("#uploadPic"). on ('Change', function (event) {event.preventDefault (); $ ("formulario"). Subt ();});Introducir un iframe en la interfaz donde se debe cargar la imagen, llame al método de iframe en la biblioteca pública, obtenga la URL de la imagen y muestre la imagen en el nombre de iframe
// Extraiga la ruta en la función iframe iframe (el) {var baseUrl = ""; var code, filePath; var place = $ (el) [0] .contentwindow.location.search; console.log (lugar); if (lugar) {code = place.match (/code =/d+/) [0] .substr (5); if (place.match (place) {filepath = place.match (/filepath =/s+/) [0] .substr (9);} $ (el) .contents (). find (". tip"). css ('color', '#d0021b'); console.log (filePath); switch (código) {caso "200": $ (el) .contents (). con éxito '); $ (el) .contents (). find (". tip"). css (' color ','#55a012 '); $ (el) .contents (). find ("#filebtn> img"). show (). attr ("src", baseurl + " +" filepath); regreso "/" + filepath; case; "206": $ (el) .contents (). Find (". Tip"). Text ('file demasiado grande'); break; case "207": $ (el) .contents (). Find (". Tip"). Text ('error de tipo de archivo'); break; case "208": $ (el) .contents (). Buscar (".Solución 2: Más tarde descubrí que había dos problemas con este enfoque. Una era que las imágenes enviadas por el usuario eran demasiado grandes y el fondo no lo comprimió (los colegas en el fondo estaban demasiado ocupados. Para acomodarlas, lo comprimimos en la parte delantera).
El segundo es que después de que la carga de la imagen sea exitosa, la imagen se mostrará en el iframe, que requiere un cierto tiempo de reacción. A veces, el usuario informará que la imagen no se puede cargar, pero de hecho es solo que el fondo aún no ha regresado ...
Así que decidí subirlo al fondo usando base64
<input type = "file" id = "uploadPic" name = "file"> <etiqueta for = "uploadpic" id = "fileBtn">+<img src = ""/> </label> <span> Por favor, cargue la imagen, el tamaño está dentro de 2M <BR/> (el tipo de imagen puede ser JPG, jepg, png, gif, bmp) <BR/> revertido de imagen referenciada 640*400 </span> <input type = "text" name = "Turnurl"> <Canvas ID = "uploadImg" style = "visual
La estructura es similar a la original, pero hay un lienzo adicional
$ ("#uploadPic"). on ('Change', function (event) {event.preventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (file.size> 2097152) {alerta ("por favor cargue imágenes menos que 2M"); regreso falso;} si;} (? 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.////////function canvas.width = w; // canvas.height = h; cxt.drawimage (img, 0, 0,640,400); // cxt.drawimage (img, 0, 0); $ (". showpic"). show (). attr ('src', canvas.todataurl ("imagen/jpeg",,,,, 0.9)); $. Ajax ({Url: "/front/uploadbybase64.do",type:" post ", data: {" imgstr ": canvas.todataurl (" imagen/jpeg ", 0.9) .split (',') [1]}, éxito: funciones (datos) {console.log (data); $ (". showpic"). show (). attr ('data-url', "/"+ data.url);}});}}1. Primero, use la información del archivo de entrada para determinar el archivo de tamaño del archivo.size y si el archivo es un archivo de imagen.
2. Luego use la interfaz FileReader de HTML5 para obtener los datos Base64 de esta imagen.
3. Pase esta base64 al lienzo y sirva como el SRC de una imagen. En este momento, puede establecer el tamaño de resolución de la imagen para garantizar que las imágenes cargadas tengan una resolución unificada. Por supuesto, también puede basarse en el tamaño original de la imagen.
4. Before ajax, directly display the processed base64 (so that the user can immediately see the uploaded image), and then pass canvas.toDataURL("image/jpeg", 0.9).split(',')[1] (the type is image/jpeg, you can use the second parameter to set the image quality) to the corresponding interface in the background
5. Luego, ate la URL devuelta en segundo plano a la propiedad de la imagen de datos de datos de la imagen, y simplemente obtenga la URL de datos cuando se envíe AJAX, para que el usuario pueda verlo lo más rápido posible, y la URL aún está en proceso de AJAX en el fondo.
Postscript: Hay un problema con ambas soluciones, que cargarán muchas imágenes redundantes en el fondo. Pero los colegas en el fondo parecen no tener objeción.
El efecto real es como este http://www.qqcchou.org/qqcweb/pages/photoiframe.html
El anterior es la práctica de proyecto, el formulario de carga de imagen o la compresión de imagen frontal de Base64 (compresión de imagen frontal) introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!