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 as part of the page URL, and I will intercept it.
Solution 1: iframe+form form
<form action="/user/" class="fileForm picUpload" enctype="multipart/form-data" method="post">
<input type="file" name="file">
<label for="uploadPic" >
+
<img src="" />
</label>
<input type="text" name="turnUrl" class="turnUrl">
</form>
$(".turnUrl").val();
$("#uploadPic").on('change', function(event) {
();
$("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 iframefunction iframe(el) {
var baseurl = "";
var code, filePath;
var place = $(el)[0].;
(place);
if (place) {
code = (/code=\d+/)[0].substr(5);
if ((/filepath=\S+/)) {
filePath = (/filepath=\S+/)[0].substr(9);
}
$(el).contents().find(".tip").css('color', '#d0021b');
(filePath);
switch (code) {
case "200":
$(el).contents().find(".tip").text('Uploaded 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('The file is 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 use base64 to upload it to the background
<input type="file" name="file"> <label for="uploadPic" > + <img class="showPic" src="" /> </label> <span class="tip">Please upload pictures，The size is in2MWithin<br/>(The image type can bejpg,jepg,png,gif,bmp)<br/>Recommended image ratio is640*400</span> <input type="text" name="turnUrl" class="turnUrl"> <canvas style="display:none"></canvas>
The structure is similar to the original one, but there is an extra canvas
$("#uploadPic").on('change', function(event) {
();
($(this)[0].files);
var file = $(this)[0].files[0];
if(>2097152){
alert("Please upload a picture less than 2M");
return false;
} if (!/image\/\w+/.test()) {
alert("The file must be a picture!");
return false;
}
var reader = new FileReader();
(file);
= function(e) {
createCanvas();
}
});
function createCanvas(src) {
var canvas = ("uploadImg");
var cxt = ('2d');
= 640;
= 400;
var img = new Image();
= src;
= function() {
// var w=;
// var h=;
// = w;
// =h;
(img, 0, 0,640,400);
//(img, 0, 0);
$(".showPic").show().attr('src', ("image/jpeg", 0.9));
$.ajax({
url: "/front/",
type: "POST",
data: {
"imgStr": ("image/jpeg", 0.9).split(',')[1]
},
success: function(data) {
(data);
$(".showPic").show().attr('data-url',"/"+ );
}
});
}
}
1. First, use the information of the input file file to determine the file size and whether the file is an image
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 ("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. However, the colleagues in the background seem to have no objection, embarrassment.
This is the actual effect/qqcweb/pages/
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 for my website!