This is the second day of my participation in Gwen Challenge

I added a UI framework, only to be told that my page was ugly, and then the functionality was not perfect, so I had to redo it.

College teachers are really a long story, from SpringBoot to Python machine learning to training let’s do pure WEB applications. What did I get for my time, and who was a clown in a hurry?

I admit that the page is ugly, but I don’t want to say that I am perfunctorily, and then say that I can access on the phone, say something about PWA, but also a face of disgust that I do not understand. University really what cattle horse teacher has, she too take themselves seriously, the training is 4 days, to you deployment to your mobile phone access to your page good-looking to you as a server my God.

Aiming at the problem of “pictures should be uploaded normally and then identified”.

Because there is no back end, I want to directly paste the picture address to Ali Cloud for text recognition, now if I want to upload the picture, I will be dizzy… Considering that you have an online project that also exposes the file upload interface, you can make do with it.

<input id="urlImage" type="text" class="form-control" placeholder="Picture address" style="margin: 5px;" value="xxx">
<div style="display: flex; align-items:center; margin-left: 5px;">Upload pictures:<input type="file" id="identifyImage"></div>
Copy the code

To use the Ajax-POST request file upload interface, you need to construct FormData and pass in the parameters required by the interface using the append() function. Render the page after successful upload and replace the content without affecting the normal logical operation of other functions.

$("#identifyImage").on('change'.function () {
  var formData = new FormData();
  formData.append("file", $('#identifyImage') [0].files[0]);
  $.ajax({
    url: 'https://xxxxxxxx/upload'.type: 'post'.data: formData,
    contentType: false.processData: false.success: (response) = >{$('#urlImage').attr('value', response.data.url);
      $("#imgIdentify").attr('src', response.data.url);
      // console.log(response.data.url);}})});Copy the code

Encountered strange problem, ID written in Chinese, the results can not monitor the content, meng force for a long time.

As you know, as soon as the page is rearranged, it’s a new work.

.background {
  background-image: linear-gradient(135deg.# 909496 0.#25d8df 100%);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

body {
  padding: 20px;
}
Copy the code

Grid layout

<div class="col-md-2">Navigation bar (right)</div>
<div class="col-md-10">Content (left)</div>
Copy the code