Modification of input style of type=file + preview image after upload

The previous article introduced the input of type=file, but have you found that this thing is really ugly?

And its style cannot be modified directly, so some clever ways are needed to change
1.

2.

The above two are the effects after the change, and now the whole picture or the button below is the form item. Of course, it can be modified to be more lofty, here is just the display method is more concise.

Here is the method:
first talk about the simple button, because the form item of that picture will have other content that will be mentioned later.

 <input class="load_hidden video_files" name="file" type="file" value=""  onchange="load_video()">
 <button type="button" class="w_btn fix_btn2">选择文件</button><span class="alert_show"></span>

Here I will write the upload file form normally, the button written below is the effect I need to let everyone see. When it comes to the need, I think I can guess it. Make the form and the button the same size, use the hierarchical relationship to make the form one layer above the button, and make the form transparent . In this case, clicking the button is actually clicking the form, just that form. It's invisible.

Let’s talk about how to make the picture echo where needed after uploading the picture file

Sometimes we upload files not only uploading, but we may also need to preview the files we upload, such as uploading avatars. Here is the code to achieve this effect:

<img id="backimg" class="load_img" src="/static/admin/img/load.png">
<input accept="image/png,image/jpg" onchange="reads(this)">

The same as the method mentioned above, you first need to prepare an element that can display pictures, so that the real form is on the upper layer of this element and is transparent. The img in the above code is the place I want to preview. Before uploading, it is the first image above.
This is the case after uploading:

here is the use of the onchange attribute of the form item to read the js defined by me, and the image in js display.

 function reads(obj) {
    
    
         var file = obj.files[0];
         var reader = new  FileReader();
         reader.readAsDataURL(file);
         reader.onload = function (ev) {
    
    
         $("#backimg").attr("src", ev.target.result);
  }
}

This js code is not difficult, just set the file path in the read form item to the src of the display element.