1. Effect display

File uploading is simple, but it’s not. There are a lot of things involved.

2. Get back to business

There are many different ways to upload a file, but I will only introduce you to click upload and drag and drop upload. Since I haven’t yet learned how to upload file data to the server, I’ll just show you a preview of the file.

3. Technical framework

I didn’t know what a front-end framework was, but now I use it, it suddenly opens my eyes and frees me from cutting pages! Technology is changing so fast right now, but these two frameworks have been great for me, and I’ll probably see more of them in the future, but I won’t forget how they made us love the front end. two

  1. You can get faster, simpler, intuitive, and powerful front-end development frameworks that make Web development faster and easier.
  2. Write Less, Do More; reduce tag declarations.

4. Drag and drop upload

Declare a div class named dragFile in the body so that js can bind the drag event later, and create a box named list-Drag to hold the preview effect of the file.

<div class="col-md-5 col-md-offset-1 up-content dragFile"> <p style="margin-top:10px;" </p> <div class="up-area"> <div class="row"> <ul class="list-group clearfix list-drag"> </ul> </div> </div> </div>Copy the code
  1. Get the diagFile element by querySelector (it only works if you drag an image into the range), and we’re adding drop, Dragover, and Dragenter events to it.
  2. Dragover is an event that is triggered when a dragged object is dragged within the scope of another object container, because by default, data cannot be placed on other elements. To do this, I need to call the event.preventDefault() method for dragover.
  3. The drop event is triggered when the file location is selected and placed in the target region, and we want to prevent the default event from adding the above method here as well. And through e.datatransfer. files to get the list of files to drag and upload
  4. Es6 here me to apply my knowledge, for strong – cycle, traverse the file array, and the window. The URL. CreateObjectURL (file) will be subject to the incoming file parameters to create a pointer to the object of the URL. The template string can be written on multiple lines. All whitespace, new lines, and indentation in the template string will be output in the generated string as is. Then an append() method will insert the document information into ul.
$(".dragFile").on("dragenter", function(e){ e.preventDefault(); }); $('.dragFile').on('dragover', (e) => { e.preventDefault(); }) $('.dragFile').on('drop', (e) => { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; AppendFile (files, '.list-drag')}) function appendFile(files, '.list-drag') listName) { for( file of files ) { let url = window.URL.createObjectURL(file); Let liStr = ` < li class = "list - group - the item" > < div > < img SRC = "${url}" Alt = "file" / > < / div > < / li > `; $(listName).append(liStr); }}Copy the code

5. Click Upload

Here I directly Po out of the code, I believe that it is easy to understand!

Wait! One more thing that I think is worth learning, because the system’s custom input tag is ugly, so we’re going to hide it with display: None, and then we’re going to create a button to bind it to. Bootstrap has a bunch of button styles that we can use directly. JQuery is awesome with its chain-call weapon, which allows you to retrieve button clicks and bind input to click events.

<div class="col-md-5 up-content btnFile"> <div class="btn"> <button type="button" class="btn btn-success" id="btn"> </button> <input type="file" style="display:none; id="fileInput" name="fileselect" multiple> </div> <div class="up-area"> <div class="row"> <ul class="list-group clearfix  list-btn"> </ul> </div> </div> </div>Copy the code
$('#btn').click( () => { $('#fileInput').click(); }) $('#fileInput').change((event) => {var files = event.target.files; appendFile(files, '.list-btn'); }) function appendFile (files, listName) { for( file of files ) { let url = window.URL.createObjectURL(file); Let liStr = ` < li class = "list - group - the item" > < div > < img SRC = "${url}" Alt = "file" / > < / div > < / li > `; $(listName).append(liStr); }}Copy the code

Project Address:

Github.com/wuyuanlijie…

Finally, if you feel that there is anything wrong in this article, please point out the mistake and make progress together!