Das erste Projekt wurde endlich gestartet. Es ist eine öffentliche Crowdfunding -Plattform mit dem Namen Qinqingchou. Die meisten WeChat-, Computer- und Backend -Schnittstellen wurden von mir abgeschlossen. Nach ein paar Monaten habe ich das Gefühl, dass ich viel zugenommen habe und ich denke, ich muss es zusammenfassen.
Das erste, was mir in den Sinn kommt, ist das Problem des Hochladens von Bildern. Wenn die Formulardaten normalerweise von AJAX hochgeladen werden, fühlt es sich dumm an, Formulare zum Hochladen von Bildern zu verwenden. Dann habe ich zu dieser Zeit nicht daran gedacht, das JQuery Form -Plugin zu verwenden.
Die Lösung eines Kollegen im Hintergrund besteht darin, ein Formularformular in einem Iframe zu schreiben, das Bild dann hochzuladen und das Formular automatisch einzureichen. Er wird zur Adresse des Bildes auf dem Server zur URL der Seite springen, und ich werde es abfangen.
Lösung 1: Iframe+Formularformular
<form action="/user/uploadIdCard.do" enctype="multipart/form-data" method="post"><input type="file" id="uploadPic" name="file"><label for="uploadPic" id="fileBtn">+<img src="" /></label><input type="text" name="turnUrl"></form> $ (". Turnurl").Führen Sie ein Iframe in die Schnittstelle ein, in der das Bild hochgeladen werden muss, rufen Sie die Iframe -Methode in der öffentlichen Bibliothek an, erhalten Sie die URL des Bildes und zeigen Sie das Bild im IFRame an
// den Pfad in der iframe -Funktion iframe (el) {var baseUrl = ""; var code, filepath; var place = $ (el) [0]. {filepath = place.match (/filepath =/s+/) [0] .Substr (9);} $ (el) .Contents (). Find (". Tipp"). CSS ('color', '#d0021b'); console.log (Filepath); Switch (Code). erfolgreich '); $ (el) .Contents (). Find ("Tipp"). CSS (' Color ','#55a012 '); "206": $.Lösung 2: Später stellte ich fest, dass es zwei Probleme mit diesem Ansatz gab. Eines war, dass die vom Benutzer gesendeten Bilder zu groß waren und der Hintergrund es nicht komprimierte (die Kollegen im Hintergrund waren zu beschäftigt. Um sie aufzunehmen, haben wir es am vorderen Ende komprimiert).
Die zweite ist, dass nach dem Hochladen des Bildes das Bild auf dem Iframe angezeigt wird, was eine bestimmte Reaktionszeit erfordert. Manchmal meldet der Benutzer, dass das Bild nicht hochgeladen werden kann, aber tatsächlich ist es nur so, dass der Hintergrund noch nicht zurückgekehrt ist ...
Also habe ich beschlossen, es mit Base64 auf den Hintergrund hochzuladen
<input type = "Datei" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "FileBtn">+<img src = ""/> </label> <span> Bitte laden Sie das Bild hoch, die Größe ist innerhalb von 2M <br/> (Der Bildtyp kann JPG, JEPG, PNG, GIF, GIF, BMP) sein. 640*400 </span> <Eingabe type = "text" name = "TurnUrl"> <Canvas id = "UploadImg" style = "Anzeige: Keine"> </canvas>
Die Struktur ähnelt dem ursprünglichen, aber es gibt eine zusätzliche Leinwand
$ ("#Uploadpic"). On ('Change', Function (Ereignis) {Event.PreventDefault (); console.log ($ (this) [0] .files); var file = $ (this) [0] .files [0]; if (Datei.size> 2097152) {alert ("Bitte addieren Sie das Bild adoad als 2m"; . 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" Data.url);}});}}1. Verwenden Sie zunächst die Informationen der Eingabedatei, um die Dateigrößendatei zu ermitteln. Größen Siegröße und ob die Datei eine Bilddatei ist.
2. Verwenden Sie dann die FileReader -Schnittstelle von HTML5, um die Base64 -Daten dieses Bildes zu erhalten.
3. Geben Sie diese Basis 64 in Leinwand und dienen Sie als SRC eines Bildes. Zu diesem Zeitpunkt können Sie die Auflösungsgröße des Bildes festlegen, um sicherzustellen, dass die hochgeladenen Bilder eine einheitliche Auflösung haben. Natürlich kann es auch auf der ursprünglichen Größe des Bildes basieren.
V.
5. Dann bin das im Hintergrund zurückgegebene URL in die Data-URL-Eigenschaft des Bildes zurückgegeben und erhalten Sie die Daten-URL, wenn AJAX eingereicht wird, damit der Benutzer sie so schnell wie möglich sehen kann und die URL tatsächlich noch im Prozess von AJAX zum Hintergrund ist.
PostScript: Bei beiden Lösungen gibt es ein Problem, das viele redundante Bilder auf den Hintergrund hochladen. Aber die Kollegen im Hintergrund scheinen keine Einwände zu haben.
Der tatsächliche Effekt ist wie dieser http://www.qchou.org/qqcweb/pages/photoiframe.html
Das obige ist die vom Editor eingeführte Projektpraxis, Bild-Upload-Formular oder Base64 Front-End-Bildkomprimierung (Front-End-Bildkomprimierung). Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!