The first project has finally been launched. It is a public welfare crowdfunding platform called Qinqingchou. Most of the WeChat, computer and backend interfaces have been completed by me. After a few months, I feel that I have gained a lot and I think I need to summarize it.
The first thing that comes to mind is the issue of uploading images. When the form data is usually uploaded by ajax, it feels stupid to use form forms to upload images. Then at that time I didn't think of using the jquery form plugin.
The solution given by a colleague in the background is to write a form form in an iframe, and then upload the image and submit the form automatically. He will jump to the address of the image on the server to the URL of the page, and I will intercept it.
Solution 1: iframe+form form
<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").val(window.location.pathname);$("#uploadPic").on('change', function(event) {event.preventDefault();$("form").submit();});Introduce an iframe in the interface where the image needs to be uploaded, call the iframe method in the public library, obtain the url of the image and display the image in the iframe
// Extract the path in the iframe function iframe(el) {var baseurl = "";var code, filePath;var place = $(el)[0].contentWindow.location.search;console.log(place);if (place) {code = place.match(/code=/d+/)[0].substr(5);if (place.match(/filepath=/S+/)) {filePath = place.match(/filepath=/S+/)[0].substr(9);}$(el).contents().find(".tip").css('color', '#d0021b');console.log(filePath);switch (code) {case "200":$(el).contents().find(".tip").text('upload successfully');$(el).contents().find(".tip").css('color', '#55a012');$(el).contents().find("#fileBtn>img").show().attr("src", baseurl + "/" + filePath);return "/" + filePath;case "206":$(el).contents().find(".tip").text('File too large');break;case "207":$(el).contents().find(".tip").text('File type error');break;case "208":$(el).contents().find(".tip").text('System Error');}}}Solution 2: Later I found that there were two problems with this approach. One was that the pictures sent by the user were too large and the background did not compress it (the colleagues in the background were too busy. In order to accommodate them, we did compress it on the front end).
The second is that after the uploading of the image is successful, the image will be displayed on the iframe, which requires a certain reaction time. Sometimes the user will report that the image cannot be uploaded, but in fact it is just that the background has not returned yet...
So I decided to upload it to the background using base64
<input type="file" id="uploadPic" name="file"><label for="uploadPic" id="fileBtn">+<img src="" /></label><span>Please upload the image, the size is within 2M<br/>(The image type can be jpg,jepg,png,gif,bmp)<br/>Recommended image ratio is 640*400</span><input type="text" name="turnUrl"><canvas id="uploadImg" style="display:none"></canvas>
The structure is similar to the original one, but there is an extra canvas
$("#uploadPic").on('change', function(event) {event.preventDefault();console.log($(this)[0].files);var file = $(this)[0].files[0];if(file.size>2097152){alert("Please upload image less than 2M");return false;} if (!/image///w+/.test(file.type)) {alert("File must be an image!");return false;}var reader = 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);$(".showPic").show().attr('src', canvas.toDataURL("image/jpeg", 0.9));$.ajax({url: "/front/uploadByBase64.do",type: "POST",data: {"imgStr": canvas.toDataURL("image/jpeg", 0.9).split(',')[1]},success: function(data) {console.log(data);$(".showPic").show().attr('data-url',"/"+ data.url);}});}}1. First, use the information of the input file file to determine the file size file.size and whether the file is an image file.type
2. Then use the FileReader interface of html5 to obtain the base64 data of this image.
3. Pass this base64 into canvas and serve as the src of a picture. At this time, you can set the resolution size of the picture to ensure that the uploaded pictures have a unified resolution. Of course, it can also be based on the original size of the picture.
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. Then tie the url returned in the background to the data-url property of the image, and just get the data-url when ajax is submitted, so that the user can see it as fast as possible, and the url is actually still in the process of ajax to the background.
Postscript: There is a problem with both solutions, which will upload a lot of redundant pictures to the background. But the colleagues in the background seem to have no objection.
The actual effect is like this http://www.qqchou.org/qqcweb/pages/photoIframe.html
The above is the project practice, image upload form form or base64 front-end image compression (front-end image compression) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!